Display div affected by CSS3 animation on top

Question

I have a div card that plays an animation on click, which includes the card scaling to be larger. The problem is that as the card scales bigger, it's edges are displayed under other cards. http://puu.sh/oqtEs/5c0d525f8d.png

I was able to fix this by adding z-index to the class that gets applied on click, but it did not work on Safari, but did work on Chrome, FireFox and Edge.

@-webkit-keyframes flipAndZoomAnim
{
   0%   { -webkit-transform: rotateY(0deg) scale(0.5) translateZ(1px) }
   20%  { -webkit-transform: rotateY(180deg) scale(0.5) translateZ(1px) }
   40%  { -webkit-transform: rotateY(180deg) scale(1.0) translateZ(1px) }
   80%  { -webkit-transform: rotateY(180deg) scale(1.0) translateZ(1px) }
   100% { -webkit-transform: rotateY(180deg) scale(0.5 ) translateZ(1px) }
}

@keyframes flipAndZoomAnim
{
   0%   { transform: rotateY(0deg) scale(0.5) translateZ(1px) }
   20%  { transform: rotateY(180deg) scale(0.5) translateZ(1px) }
   40%  { transform: rotateY(180deg) scale(1.0) translateZ(1px) }
   80%  { transform: rotateY(180deg) scale(1.0) translateZ(1px) }
   100% { transform: rotateY(180deg) scale(0.5) translateZ(1px) }
}

.flipAndZoom {
    z-index: 5;
    webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-animation-name: flipAndZoomAnim;
    animation-name: flipAndZoomAnim;
}

There is some solutions on how to do this online, but I found none with animations. Including the translateZ(1px), was suggested but did not work, as well as translate3d(0,0,0);

HTML

<div id="board">
     <div id="card1" class="card">
          <figure class="front">
               <img src="front.jpg"/>
          </figure>
          <figure class="back">
               <img src="back.jpg"/>      
          </figure>
     </div>

     <div id="card2" class="card">
          <figure class="front">
              <img src="front.jpg"/>
          </figure>
          <figure class="back">
              <img src="back.jpg"/>      
          </figure>
     </div>
</div>

I have the cards displayed row by row in a div, to which they are added by JavaScript.

   for (int i = 0; i < 20; i++) {
        $('#board').append(card.getHTML());
    }

What I find interesting that the zoomed in card is systematically displayed under the other cards, but never over.

Here is the website: http://valtterilaine.bitbucket.org/public_html/

Answer 1

Changing

translateZ(1px)

to

translateZ(-1px)

fixed the issue. Since the cards are flipped they were being translated backwards.