Переопределяющая карта по оси Z

Question

Я работаю над своим portfolio, я поставил в него какую-то флип-карту, чтобы показать свои приложения для Android, когда кто-то нависнет над ними, они перевернут и увеличат масштаб и покажут краткое описание.

Проблема у меня в том, что нижняя карта перекрывают выше тех, когда завис над, я попытался с помощью Z-индекса без успеха

Это CSS карт

/* Card */ 
    .card-wrapper { 
     -webkit-perspective: 1000; 
     -moz-perspective: 1000; 
     perspective: 1000; 

     border: 1px solid #ccc; 

     margin: 50px; 
     display: inline-block; 
     visibility:hidden; 
     width:400px; 
     height:540px; 
     z-index: 2; 

    } 


     .card-wrapper:hover .flipper, .card-wrapper.hover .flipper { 
      -webkit-transform: rotateY(180deg) scale(1.5,1.5) translate(10%, 10%); 
      -moz-transform: rotateY(180deg) scale(2,2); 
      transform: rotateY(180deg) scale(2,2); 
      position: relative; 

     } 

    .card-wrapper, .front, .back { 

    } 

    .flipper { 
     -webkit-transition: 0.6s; 
     -webkit-transform-style: preserve-3d; 

     -moz-transition: 0.6s; 
     -moz-transform-style: preserve-3d; 

     transition: 0.6s; 
     transform-style: preserve-3d; 
     background-color:#ffffff; 
     height:540px; 

     position: relative; 
     z-index: 2; 
    } 

    .front, .back { 
     -webkit-backface-visibility: hidden; 
     -moz-backface-visibility: hidden; 
     backface-visibility: hidden; 
     visibility:visible; 

     position: absolute; 
     top: 0; 
     left: 0; 
    } 

    .front { 
     z-index: 2; 
    } 

    .back { 
     -webkit-transform: rotateY(180deg); 
     -moz-transform: rotateY(180deg); 
     transform: rotateY(180deg); 
     z-index: 200000000000000000; 

    } 

И это HTML

<div class="card-wrapper" ontouchstart="this.classList.toggle('hover');"> 
       <div class="flipper"> 
        <div class="front"> 
         <!-- front content --> 
         <div class="card"> 
          <img src="images/wakey-feature.png" alt="Wakey" width="400px" height="450px"> 
          <h2 class="app-title">Wakey</h2> 
         </div> 

        </div> 
        <div class="back"> 
         <!-- back content --> 
         <div class="card"> 
         </div> 
        </div> 
       </div> 


       <div class="play-store-card"> 
        <a href="https://play.google.com/store/apps/details?id=com.doublep.wakey" target="_blank"> 
         <div class="dashed-line"> 
          <button class="play-store-button" type="button" style="margin: 0px 0px 0px 0px;"> 
           <img src="images/play-store.png"> 
          </button> 

         </div> 
        </a> 

       </div> 
      </div> 

Как я могу исправить эту проблему?

Answer 1

z-index не поможет вам в этом, он не сделает отображение div перед другими div.

что вам нужно сделать, это действительно положить их впереди. Один вешать, так как у вас есть уже переводить в парении, было бы изменить его, чтобы сделать Div ближе к вам:

вместо

.card-wrapper:hover .flipper, .card-wrapper.hover .flipper { 
     -webkit-transform: rotateY(180deg) scale(1.5,1.5) translate(10%, 10%); 

должно быть

.card-wrapper:hover .flipper, .card-wrapper.hover .flipper { 
    -webkit-transform: rotateY(180deg) scale(1.5,1.5) translate3d(10%, 10%, -100px); 

и вам нужно установить сохранение 3d во всех элементах. Я сделал это с:

div { 
-webkit-transform-style: preserve-3d; 
} 

, но, возможно, вы хотите быть более точным. В любом случае, с этими 2 изменениями, я думаю, что он работает нормально. (В WebKit)

Кстати, я хотел бы дать вам цену на самый высокий Z-индекс никогда не видел :-)