Streaming live at 10am (PST)

Transform Interactions Z index


#1

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. https://preview.webflow.com/preview/neuone?preview=c6402d587184ee9e3f892ff41465fe27


Help with transform interactions
#2

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

<script>
  $("#up").click(function(){
   $("#card").css("z-index", -10);
 });

  $("#down").click(function(){
   $("#card").css("z-index",10);
 });
</script>

#3

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.


#4

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.


#5

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.