重新排列Z軸上的卡片

我正在使用我的portfolio，我在其中放置了一些翻轉卡以顯示我的android應用程序，當有人將鼠標懸停在它們上方時，它們翻轉並放大並顯示簡要說明。重新排列Z軸上的卡片

我遇到的問題是，當鼠標懸停在低卡重疊以上的，我嘗試使用的z-index沒有成功

這是卡片的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>

我該如何解決這個問題？

來源

2013-03-25 DoubleP90

z-index不會幫你做到這一點，它不會讓div顯示在別人面前。

你需要做的是真的把它們放在前面。一個posibility，因爲你必須在懸停已經是一個翻譯，是改變它使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中）

順便說一句，我會給你一個價格見過:-)

來源

2013-03-26 20:49:21 vals

由於它的工作原理最高的z-index，但我有一個問題，現在腳蹼已經翻轉的問題，當我徘徊在一張卡片上，它有點震動，什麼都不做，只是有時它會像它應該那樣工作，你有這個解決方案嗎？關於Z指數我想我是絕望xD哈哈 – DoubleP90 2013-03-26 23:06:07

好吧，它現在的作品，我已經設置了2的第一個值的變換爲0 – DoubleP90 2013-03-26 23:21:29

好知道！順便說一下，好網站！ – vals 2013-03-27 06:19:04

重新排列Z軸上的卡片

回答

相關問題