Checkout the code here: https://codepen.io/W3-design/pen/pBOJyy
When I hover over the images on desktop the CSS transition works correctly, it rotates the image and changes the z-index to bring the hovered image to the foreground, the same behaviour doesn’t happen when I “hover/tap” each image in iOS in both Safari and Chrome the CSS transition is OK but the z-index is all messed up.
You’ll notice when the page loads that the z-index on iOS is not honoured at all and the images are displayed in markup order :(
I would like the iOS “hover/tap” result to be the same as the desktop.
NOTE: I have read some posts about adding translate3d to the img CSS but this doesn’t work if you have multiple transforms like I want.
This fixes the z-index issue without the other transforms:
-webkit-transform: translate3d(0,0,0);
This doesn’t fix the z-index issue:
-webkit-transform: translate3d(0,0,0) rotate3d(1,0,0,-55deg) rotate3d(0,0,1,-30deg);
