受CSS3動畫影響最大的顯示div

我有一個div卡片，它可以在點擊時播放動畫，其中卡片縮放比例要大一些。問題是，隨着卡的規模越來越大，它的邊緣會顯示在其他卡下面。 http://puu.sh/oqtEs/5c0d525f8d.png 受CSS3動畫影響最大的顯示div

我能夠通過將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/

來源

2016-04-21 Waltari

你能舉起小提琴嗎？ – GeckoTang

translateZ（1px）通常會將div移向用戶。但是如果你旋轉div 180deg，它會將它向後移動...你有沒有嘗試將它改爲-1px？ – vals

如果你不能把它放在小提琴或片段中，至少要把它放在[plunker]（http://plnkr.co/）上。 –

改變

translateZ(1px)

到

translateZ(-1px)

固定的問題。由於牌被翻轉，他們被翻轉回來。

來源

2016-04-27 08:43:13 Waltari

如果Vals想要發佈答案，我會刪除這個並給他賞金。 – Waltari

Z索引應做的工作，howerver可能會丟失位置的規則。

爲了使z-index正常工作，您必須爲位置設置以下值：絕對值，相對值或固定值。在這種情況下，我想是需要

position: relative;

。

來源

2016-04-26 18:25:20

卡片已經有位置：相對。 – Waltari

受CSS3動畫影響最大的顯示div

回答

相關問題