title: CSS 3D Rotation/z-index in Safari
body: <p>I created a flipbook animation and have tested it in Chrome, Firefox, and Safari, and you can see it in action here:</p>
  
  <p><a href="http://codepen.io/tcmulder/pen/omyuE" rel="nofollow noreferrer">http://codepen.io/tcmulder/pen/omyuE</a></p>
  
  <p>Unfortunately, it isn't working correctly in Safari because after the animation concludes, z-index seems to lose it's power and the leftmost page repositions itself at the top of the stack. It may be related to the issue found here:</p>
  
  <p><a href="https://stackoverflow.com/questions/5472802/css-z-index-lost-after-webkit-transform-translate3d">css z-index lost after webkit transform translate3d</a></p>
  
  <p>but the solution suggested doesn't work. I also played around with using rotate3d to change the x coordinates to trick it into a sort of pseudo-z-index overlay, but this doesn't seem to work well either.</p>
  
  <p>How can I get Safari to preserve z-index after the animation concludes? </p>