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
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>
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.
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.