我該如何解決這個CSS卡片翻轉過渡？

我想創建兩個div，在父類中，一個div與一類正面，另一類背面。我試圖翻轉後面的一個，並將它放在前面，所以當我翻轉它的父母后面的一個顯示，並且當它的翻轉再次回到前面顯示的時候，創建一個三維卡片，當徘徊時翻轉。然而，無論背部與前部重疊，前部只有從前部或後部觀察時纔可見。我曾嘗試使用背面可見性：隱藏在兩者上，這從我的理解應該使翻轉後的div不可見，但是這導致背面完全消失，並且它對前面沒有影響。我知道這是可能的，因爲我看到有人這樣做，但是我在這裏做錯了什麼，我該如何解決這些問題？我該如何解決這個CSS卡片翻轉過渡？

https://fiddle.jshell.net/h8vz85b3/2/

<!DOCTYPE html> 
<html> 
    <head> 
     <title> media test</title> 
     <meta charset="utf-8"> 
     <meta name="keywords" content="test,css, css test"> 
     <meta name="description" content="A CSS test and review."> 
     <meta name="author" content="brandon lind"> 
     <link rel="stylesheet" media="screen" href="css/main.css"> 
     <style> 
      .parent{ 
       transition: transform 1s ease-in-out 0s; 
       width: 100px; 
      } 
      .parent:hover { 
       transform: rotateY(180deg); 
      } 
      .back,.front{ 
       width: 100px; 
       height: 170px; 
       //backface-visibility: hidden; 

      } 
      .front{ 
       background-color: blue; 
       transform: translate(0, -150px); 
      } 
      .back{ 
       background-color: red; 
       transform: rotateY(190deg);   
      } 
     </style> 
    </head> 
    <body> 
     <div class="parent"> 
      <div class="back"> 
       back 
      </div> 
      <div class="front"> 
       front 
      </div> 
     </div> 
    </body> 
</html>

來源

2017-05-26 alexis

編輯：簡化的代碼位。

您可以通過包括transform-style: preserve-3d解決前端始終顯示在上面的問題。你也一定要包括backface-visibility: hidden，就像你的直覺一樣。

此外，如果您使用絕對定位而不是翻譯，則您可以更輕鬆地將卡面定位在彼此之上，所以我爲您做出了改變。

下面的示例對我來說很好，沒有聲明z-index，但如果遇到後面顯示的問題而不是前面的問題，則可以簡單地給後面的div分配比後面的div更高的z-index。

.parent { 
 
    transition: transform 1s ease-in-out 0s; 
 
    transform-style: preserve-3d; 
 
    width: 100px; 
 
} 
 
.parent:hover { 
 
    transform: rotateY(180deg); 
 
} 
 
.back, 
 
.front { 
 
    width: 100px; 
 
    height: 170px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    backface-visibility: hidden; 
 
} 
 
.front { 
 
    background-color: blue; 
 
} 
 
.back { 
 
    background-color: red; 
 
    transform: rotateY(180deg); 
 
}

<div class="parent"> 
 
    <div class="back"> 
 
    back 
 
    </div> 
 
    <div class="front"> 
 
    front 
 
    </div> 
 
</div>

來源

2017-05-26 20:18:00 cjl750

我該如何解決這個CSS卡片翻轉過渡？

回答

相關問題