強制div低於另一個（具有3D翻轉效果）

我已經在CSS中實現了3D翻轉效果，以允許我的div有一個正面和背面（默認顯示爲正面，回到懸停狀態）。翻轉本身工作得很好，但最後還有一個小高度的div，我似乎無法弄清楚如何將翻轉的翻轉過來。我的目標是讓一個線上的翻轉格，另一個翻轉下方的圖像，而不是被翻轉格覆蓋。強制div低於另一個（具有3D翻轉效果）

當然，因爲我們不能讓這個過於簡單，所以翻轉圖像和div中的圖像都必須能夠處理可變大小的圖像，它們將永遠不會設置尺寸。

這裏的HTML：

<div class="images"> 
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 

     <div class="flipper"> 

      <div class="front"> 
       <img src="http://www.placehold.it/350x450?text=front"> 
      </div> 

      <div class="back"> 
       <img src="http://www.placehold.it/350x450?text=back"> 
      </div> 

     </div> 

    </div> 
    <br /> 
    <div class="thumbnails columns-3" style=""><img src="http://www.placehold.it/350x150?text=image"></div> 
</div>

而這裏的CSS：

div.images { 
    float: left; 
    margin-bottom: 1em; 
} 


/* Flip3D */ 
/* entire container, keeps perspective */ 
.flip-container { 
    perspective: 1000; 
} 
    /* flip the pane when hovered */ 
    .flip-container:hover .flipper, .flip-container.hover .flipper { 
     transform: rotateY(180deg); 
    } 

.flip-container, .front, .back { 
/* width: 100%; 
    height: 100%;*/ 

} 

/* flip speed goes here */ 
.flipper { 
    transition: 0.6s; 
    transform-style: preserve-3d; 
} 

/* hide back of pane during swap */ 
.front, .back { 
    backface-visibility: hidden; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

/* front pane, placed above back */ 
.front { 
    z-index: 2; 
    /* for firefox 31 */ 
    transform: rotateY(0deg); 
} 

/* back, initially hidden pane */ 
.back { 
    transform: rotateY(180deg); 
}

這裏是我的小提琴：https://jsfiddle.net/8z2vbcrw/

希望這一切是有道理的，但請讓我澄清，如果不。

來源

2016-03-01 carbide20

發生這種情況的原因是因爲鰭狀肢類的尺寸爲0x0，因爲其中的所有元素都具有絕對位置。您可以使用JavaScript來查找正面和/或背面卡的尺寸，並將其應用爲「鰭狀肢類」的高度和寬度 –

如果您使用靜態高度時很好，那麼您可以通過添加高度：500px ;到您的.flip容器類。 – Naga2Raja

它可以通過給予高度和寬度您.flipper容器或剛剛擺脫前卡上的絕對定位完成...

https://jsfiddle.net/8z2vbcrw/

.front, .back { 
    backface-visibility: hidden; 
    top: 0; 
    left: 0; 
} 
.back { 
    position: absolute; 
}

通過這樣做，前卡保持佈局。

來源

2016-03-01 02:00:40

刪除絕對定位完美地工作，並且是我特定場景的最佳選擇。謝謝！ – carbide20

強制div低於另一個（具有3D翻轉效果）

回答

相關問題