在顶部显示受CSS3动画影响的div

Question

我有一张div卡,可以在点击时播放动画,其中包括卡片缩放更大.问题是,当卡片扩大时,它的边缘会显示在其他卡片下面.http://puu.sh/oqtEs/5c0d525f8d.png

我能够通过将z-index添加到在点击时应用的类来修复此问题,但它在Safari上不起作用,但在Chrome,FireFox和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;
}

关于如何在线进行此操作有一些解决方案,但我没有找到任何动画.包括translateZ(1px),有人提出,但没有奏效,以及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>

我在div中逐行显示了这些卡片,它们是通过JavaScript添加的.

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

我觉得有趣的是,放大的卡片系统地显示在其他卡片下,但从未结束.

这是网站:http://valtterilaine.bitbucket.org/public_html/

Answer 1

改变

translateZ(1px)

到

translateZ(-1px)

解决了这个问题。由于卡片被翻转，它们被向后翻译。