透視CSS3不工作

Question

我想在X軸方向開發卡翻轉動畫。截至目前，div現在只需使用rotateX（）方法旋轉。我已經嘗試使用透視屬性到上面的div，而不是工作它扭曲我的div結構。因爲，這只是一個工作階段，我只針對谷歌瀏覽器。 請參閱codepen。

這是我的HTML代碼。

<div class="wrapper"> 
       <div class="upper"> 
        <div class="upper-current"> 
         <div class="content"> 
          1 
         </div> 
        </div> 
        <div class="upper-next"> 
         <div class="content"> 
          2 
         </div> 
        </div> 
       </div> 

       <div class="lower"> 
        <div class="lower-current"> 
         <div class="content"> 
          1 
         </div> 
        </div> 
        <div class="lower-next"> 
         <div class="content"> 
          2 
         </div> 
        </div> 
       </div> 
      </div> 

而我的CSS， div.row { 寬度：150像素; height：200px; margin：0 auto; }

 div.wrapper{ 
      background-color: #444; 
      width: 150px; 
      height: 200px; 
      border-radius: 5px; 
      position:relative; 

     } 

     div.wrapper div.upper, div.wrapper div.lower{ 
      height: 100px; 
      width:100%; 

     } 

     div.upper-current{ 
      transition :all 1s; 
      transform-origin: 50% 100%; 
     } 

     div.wrapper > div.upper > div, div.wrapper > div.lower > div{ 
      height: 100px; 
      width:100%; 
      position:absolute; 
      top:0; 
      overflow:hidden; 
      text-align:center; 
      background-color:#444; 
     } 

     div.wrapper > div.upper > div{ 
      border-bottom: 3px solid #333; 
     } 

     div.wrapper > div.lower > div{ 
      height: 200px; 
     } 

     div.upper-current{ 
      z-index: 4; 
     } 

     div.upper-next{ 
      z-index: 3; 
     } 

     div.lower-current{ 
      z-index: 2; 
     } 

     div.lower-next{ 
      z-index: 1; 
     } 

     div.content{ 
      position: relative; 
      top: -24px; 
     } 

我想達到這樣的效果。

但與我的代碼，我只是gettting。

Answer 1

UPDATE： 這codepen應該在Firefox上運行了。由於堆棧上下文問題，我只是製作了.upperrelative並給它一個z-index，因此它會高於.lower。

如果你把perspective CSS屬性上.wrapper它應該工作：codepen

Perspective創建一個新的堆疊內容，所以如果你把它放在.upper，所有上<div>z-index「第不再相同上下文是較低的，而較低的則是由於自然的HTML堆疊而處於頂端。