# CSS flip card problem **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [October 29, 2023, 8:25pm UTC](https://forum.inductiveautomation.com/t/css-flip-card-problem/81139 "2023-10-29T20:25:31Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![eMax](https://avatars.discourse-cdn.com/v4/letter/e/cdc98d/32.png) [@eMax](https://forum.inductiveautomation.com/u/eMax)\ **Post date:** [October 29, 2023, 8:25pm UTC](https://forum.inductiveautomation.com/t/css-flip-card-problem/81139/1 "2023-10-29T20:25:32Z")
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. ![Card](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/1/21c8a92a6fe6bfcd3342a7188735711f46678e19.png) ![Inner](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/5/15007a79a42c2ba85e5a5e951fa25688a6967d07.png) ![Front](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/c/2cd9f173bd8bc63bc203c9ba68cde53787b1d7fe.png) ![Back](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/7/07b25ea4c134ced7c66c686b5882d4a9d85d0081.png) When I press rotate buton only the front card is rotated with a mirror effect but I can't show the back card. ![Button event](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/b/6b7f31788b7ee06dc4b7d15fe13e3cee32b00d15.png) This is the result: ![Result](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/7/b77e9e57f4a66d8b4d019f19442d64c69dc875a9.png) I would like to get this: ![Goal](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/2/52ee0c900dd312d6eb522d8fbdd8f59cced7d65a.png) 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. ---
**Author:** ![tamerplc](https://avatars.discourse-cdn.com/v4/letter/t/d78d45/32.png) [@tamerplc](https://forum.inductiveautomation.com/u/tamerplc)\ **Post date:** [October 30, 2023, 10:42am UTC](https://forum.inductiveautomation.com/t/css-flip-card-problem/81139/2 "2023-10-30T10:42:54Z")
check this resource may will help you > **[Ignition Exchange](https://inductiveautomation.com/exchange/2484/overview)** > > Discover, share, and download community made Ignition resources in collaboration with your organization or the Ignition community. ---
**Author:** ![eMax](https://avatars.discourse-cdn.com/v4/letter/e/cdc98d/32.png) [@eMax](https://forum.inductiveautomation.com/u/eMax)\ **Post date:** [October 30, 2023, 11:20am UTC](https://forum.inductiveautomation.com/t/css-flip-card-problem/81139/3 "2023-10-30T11:20:14Z")
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. ---
**Author:** ![Felipe\_CRM](https://avatars.discourse-cdn.com/v4/letter/f/dfb087/32.png) [@Felipe\_CRM](https://forum.inductiveautomation.com/u/Felipe_CRM)\ **Post date:** [October 30, 2023, 2:59pm UTC](https://forum.inductiveautomation.com/t/css-flip-card-problem/81139/4 "2023-10-30T14:59:05Z")
I got it to work on my test page, but I used camelcase for the properties, in particular `backfaceVisibility: hidden`: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/4/b46b0a2d0f705c2f12eccc84b23ffb2b847f8f46.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/e/ce1f0df13eac0823c594d52272cfd2a59512bc6a.png) Perspective doesn't really play nice with the hyphen-case property names, here's one example: > [@Event Script crashes with CSS Properties that include hyphen](https://forum.inductiveautomation.com/t/event-script-crashes-with-css-properties-that-include-hyphen/68932/4): > > Note that in python, a dash means "subtract". Jython doesn't know that you were trying to use the dash as part of a name, and that's not something IA can fix. Transforming naming styles is a workaround for poorly-thought-out computing standards (looking at you W3C). ---
**Author:** ![eMax](https://avatars.discourse-cdn.com/v4/letter/e/cdc98d/32.png) [@eMax](https://forum.inductiveautomation.com/u/eMax)\ **Post date:** [October 30, 2023, 9:51pm UTC](https://forum.inductiveautomation.com/t/css-flip-card-problem/81139/5 "2023-10-30T21:51:46Z")
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"): ```auto concat("rotateY(",!{view.params.flipTrigger}*180,"deg)"+" " + "scale(-1, 1)") ``` honestly I saw this nice effect here:: [![](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/d/5d3ec3d6c48a18091f30a4a17264744bcbed2bcd.jpeg "Incubation Factory (Inductive Automation Perspective)") ](https://www.youtube.com/watch?v=rg-voOBT-Zk&t=123s) at minute 2:01 made from @nader.chinichian But I've only known Ignition for 1 month and for now I'm quite satisfied 😄 ---
**Author:** ![Felipe\_CRM](https://avatars.discourse-cdn.com/v4/letter/f/dfb087/32.png) [@Felipe\_CRM](https://forum.inductiveautomation.com/u/Felipe_CRM)\ **Post date:** [October 31, 2023, 1:16pm UTC](https://forum.inductiveautomation.com/t/css-flip-card-problem/81139/6 "2023-10-31T13:16:16Z")
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? ---
**Author:** ![eMax](https://avatars.discourse-cdn.com/v4/letter/e/cdc98d/32.png) [@eMax](https://forum.inductiveautomation.com/u/eMax)\ **Post date:** [October 31, 2023, 6:35pm UTC](https://forum.inductiveautomation.com/t/css-flip-card-problem/81139/7 "2023-10-31T18:35:55Z")
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](https://forum.inductiveautomation.com/uploads/short-url/8c4hMTHeWsZZzqxrm8h3fyKOoD1.zip) (5.6 KB) ---
**Author:** ![Felipe\_CRM](https://avatars.discourse-cdn.com/v4/letter/f/dfb087/32.png) [@Felipe\_CRM](https://forum.inductiveautomation.com/u/Felipe_CRM)\ **Post date:** [October 31, 2023, 9:14pm UTC](https://forum.inductiveautomation.com/t/css-flip-card-problem/81139/8 "2023-10-31T21:14:10Z")
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. ---
**Author:** ![eMax](https://avatars.discourse-cdn.com/v4/letter/e/cdc98d/32.png) [@eMax](https://forum.inductiveautomation.com/u/eMax)\ **Post date:** [October 31, 2023, 9:29pm UTC](https://forum.inductiveautomation.com/t/css-flip-card-problem/81139/9 "2023-10-31T21:29:35Z")
Yes, that's very strange. Never mind, for now I'm keeping it as it is, maybe I'll investigate again fhurter. Thanks again!