Streaming live at 10am (PST)

Transform Interactions Z index

Hi all. I am trying to create a card stack with a layer of divs that reorder when clicked. I can get this to work in Safari and Firefox, but Chrome and IE encounter issues. Can anyone help with custom code javascript? Here is the share link explaining what I want to do.

Here is the code I am trying to use with help from @Brando on my previous post Help with transform interactions

   $("#card").css("z-index", -10);


Good news is that you can do it with the webflow without custom code. Instead of using z-indexes use transforms and start thinking about your card stack in 3d. Here is an example I created where you can hover objects to see them change their perceived “z-index”. I rotated the whole div so that you can see and understand what happens. This is how you can make your cards change order.

1 Like

Hi @dram How interesting! So it works when the parent is rotated in 3D, but not from a birds eye view looking down. Thank you very much for your example.

Ah yes! Actually I faced this behaviour before. The rotation of even 0.00001 degree will make it work and will be invisible to the user.