Перспектива CSS3 Не работает

Question

Я пытаюсь разработать анимацию с переворачиванием карты в направлении оси X. На данный момент div теперь просто вращается с использованием метода rotateX(). Я попытался использовать свойство перспективы в верхнем div, вместо того чтобы работать, он искажает мою структуру div. Поскольку это всего лишь рабочий этап, я настроен только на Google Chrome. См. Его на 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 { ширина: 150px; высота: 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; 
     } 

Я пытаюсь добиться этого эффекта.

Но с моим кодом я просто получаю деньги.

Answer 1

UPDATE: Этот codepen должен работать на светлячок, тоже. Из-за проблемы контекста стека я только что сделал .upperrelative и дал ему индекс z, чтобы он был выше .lower.

Если поместить свойство perspective CSS на .wrapper он должен работать: codepen

Perspective создает новый контекст стэка, так что если вы положите его на .upper, все ваши верхние <div>z-index «s больше не в том же контекст как нижние, а нижние - сверху из-за естественной укладки HTML.