title: Why is z-index affected by transform?
body: <p>So i have an icon you can flip when you click on the card. The icon is an element of the card div.</p>
  
  <p>They have <strong>the same animation</strong> when they are flipping (see code below).</p>
  
  <p>In the <a href="https://jsfiddle.net/5vdjp9ys/3/" rel="nofollow">fiddle</a> the left card has a transformY when you click it, the right card has no transform at all. For showcase purposes I set the duration of the animation and transition to 2s so you can see what goes wrong in the left card. The z-index is totally different when you compare it to the icon in the right card.</p>
  
  <p>I'd love to hear from you guys <strong>WHY</strong> this is happening, and I'd love to hear what I'm supposed to do to make it work correctly. Thanks!</p>
  
  <pre><code>/* FRONTFLIP */
  
  @-webkit-keyframes frontFlip {
    0% {
      z-index: -1;
      -webkit-transform: translate(-50%, -25%) rotateX(-180deg);
      transform: translate(-50%, -25%) rotateX(-180deg);
    }
    50% {
      -webkit-transform: translate(-50%, -75%) rotateX(-270deg);
      transform: translate(-50%, -75%) rotateX(-270deg);
    }
    100% {
      z-index: 1;
      -webkit-transform: translate(-50%, -50%) rotateX(-360deg);
      transform: translate(-50%, -50%) rotateX(-360deg);
    }
  }
  
  
  /* BACKFLIP */
  
  @-webkit-keyframes backFlip {
    0% {
      z-index: 1;
      -webkit-transform: translate(-50%, -50%) rotateX(-360deg);
      transform: translate(-50%, -50%) rotateX(-360deg);
    }
    50% {
      z-index: -1;
      -webkit-transform: translate(-50%, -75%) rotateX(-270deg);
      transform: translate(-50%, -75%) rotateX(-270deg);
    }
    100% {
      z-index: -1;
      -webkit-transform: translate(-50%, -25%) rotateX(-180deg);
      transform: translate(-50%, -25%) rotateX(-180deg);
    }
  }
  </code></pre>