CSS flip card problem

Hello guys,
I would like to create a kind of "flip card", so that when the customer clicks on a card it can rotate to show further details.

When I press rotate buton only the front card is rotated with a mirror effect but I can't show the back card.

This is the result:

I would like to get this:

I tried this on an HTML page and it works but not here, I don't understand what I'm doing wrong.
Thanks so much for your advice.

check this resource may will help you


Thank you tamerplc.
I haven't seen that resource.
I tried it, the CSS effect is not what I had in mind but for now it's fine.
Thanks again.

1 Like

I got it to work on my test page, but I used camelcase for the properties, in particular backfaceVisibility: hidden:


Perspective doesn't really play nice with the hyphen-case property names, here's one example:

1 Like

I tried both, hyphen-case and camelCase.
The only way I've got to work is bindig the back card "transform" property, like this (to avoid "mirror effect"):

concat("rotateY(",!{view.params.flipTrigger}*180,"deg)"+" " + "scale(-1, 1)")

honestly I saw this nice effect here::

at minute 2:01
made from @nader.chinichian
But I've only known Ignition for 1 month and for now I'm quite satisfied :smile:

That's really strange that it's not working correctly with the camel case properties. There may be something else going on. If you're interested in pursuing this further, can you post an image of your props again, or even better, an export of that view?

Hi Felipe,
here you are the view export.
It seems to work well, but I had to make some adjustments to the CSS. Maybe you have some better way to make it work.
Thanks anyway for your interest!
flipMotorDetails.zip (5.6 KB)

It's real interesting; even if I change everything in your view to be the same as mine, it still doesn't work without the workaround, even though mine does.

Yes, that's very strange.
Never mind, for now I'm keeping it as it is, maybe I'll investigate again fhurter.
Thanks again!

1 Like