使用變換旋轉和縮放的懸停效果z-index問題

Question

我相信我的旋轉和縮放懸停效果是z-index問題。

Fiddle here

懸停在它翻轉和比例增加，並顯示所述圖像的與細節等

麻煩的背面側的圖像時是圖像都以行和它們之間的裕度是相當小。所以當它們縮放時，它們需要在圖像的兩側重疊。目前這種重疊很好，左邊和頂部，但重疊是在右邊和下面的圖像底下..真的很奇怪！

這裏是我的代碼 - 的Html

<div id="games-container"> 

    <div class="flip-container game"> 
      <div class="flipper"> 
       <a href="#"> 
        <div class="front"> 
         <h1>Front</h1> 
        </div> 
        <div class="back"> 
          <span class="game-title"> 
           <h3>BACK</h3> 
           <span class="mob-icon"></span> 
          </span> 

          <button class="button green"><a href="#">Play Now</a></button> 
          <button class="blue button"><a href="#">More Info</a></button> 
        </div> 

       </a> 
      </div> 
    </div> 


<div class="flip-container game"> 
      <div class="flipper"> 
       <a href="#"> 
        <div class="front"> 
         <h1>Front</h1> 
        </div> 
        <div class="back"> 
          <span class="game-title"> 
           <h3>BACK</h3> 
           <span class="mob-icon"></span> 
          </span> 

          <button class="button green"><a href="#">Play Now</a></button> 
          <button class="blue button"><a href="#">More Info</a></button> 
        </div> 

       </a> 
      </div> 
    </div> 


<div class="flip-container game"> 
      <div class="flipper"> 
       <a href="#"> 
        <div class="front"> 
         <h1>Front</h1> 
        </div> 
        <div class="back"> 
          <span class="game-title"> 
           <h3>BACK</h3> 
           <span class="mob-icon"></span> 
          </span> 

          <button class="button green"><a href="#">Play Now</a></button> 
          <button class="blue button"><a href="#">More Info</a></button> 
        </div> 

       </a> 
      </div> 
    </div> 

CSS -

/* make things pretty */ 
#games-container{ 
    width:800px; 
    margin:0 auto; 
} 
#games-container div.game{ 
    margin: 0 8px 15px; 
    float: left; 
    position: relative; 
    z-index: 1; 
} 
#main-container div.inner-container div.game .front img, #main-container div.inner-container div.game .back img{ 
    width:185px; 
    height: 145px; 
} 
span.game-title { 
    background-color:rgba(25,25,25,0.6); 
    display: block; 
    position: absolute; 
    width: 100%; 
    top: 0px; 
    margin-bottom: 25px; 
    text-align: center; 
    z-index: 1; 
} 
span.game-title h3 { 
    padding: 5px; 
} 
.game h3, .game:hover span.game-title{ 
     color:silver; 
     transition:all 0.2s ease-in; 
     -webkit-transition:all 0.2s ease-in; 
} 
.game:hover h3, .game:hover span.game-title{ 
     color:#fff; 
     background-color: #0c0c0c; 
} 
.game a{ 
    display: block; 
} 

.back > .button{ 
    position: relative; 
    z-index: 1; 
} 
.button{ 
    display: block; 
    padding: 5px 10px; 
    margin:5px auto; 
    width:70%; 
    clear: both; 
    color:#fff; 
} 
button a{ 
    text-decoration: none; 
    color:#e5e5e5; 
    display: block; 
    transition: ease-in 0.12s; 
} 
button.green:hover{ 
    background-color: #00B200; 
} 
button:hover a{ 
    color:#fff; 
    transform:scale(1.1); 
} 
.back > .button.green{ 
margin-top: 45px; 
} 
button{ 
    color:#000; 
    border:none; 
} 
button.green{ 
    background-color: #419907; 
    transition:background-color 0.4s ease-in; 
    -webkit-transition:background-color 0.4s ease-in; 
} 
button.blue{ 
    background-color:#063e9b; 
    transition:background-color 0.4s ease-in; 
    -webkit-transition:background-color 0.4s ease-in 
} 

/* end of making things pretty*/ 



/* do some flipping */ 

.flip-container { 
    perspective: 900px 
    transform-style: preserve-3d; 
} 

.flip-container:hover .back { 
    transform: rotateY(0deg) scale(1.3); 
    z-index:4; 
    } 

.flip-container:hover .front { 
     transform: rotateY(180deg); 
    } 

.flip-container, .front, .back { 
    width: 185px; 
    height: 150px; 
} 

/* flip speed goes here */ 
.flipper { 
    transition: 0.9s; 
    transform-style: preserve-3d; 
    position: relative; 
} 

/* hide back of pane during swap */ 
.front, .back { 
    backface-visibility: hidden; 
    transition: 0.4s; 
    transform-style: preserve-3d; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 185px; 
    height: 145px; 
} 

.front { 
    z-index: 2; 
    transform: rotateY(0deg); 
    background-color: #333; 
    color: #000; 
    text-align: center; 
} 

.back { 
    transform: rotateY(-180deg); 
    background-color: #010b15; 
    border: solid 2px #034baf; 
} 

Answer 1

因爲你把第一z-index這個選擇#games-container div.game，您可以懸停選擇改變這種刪除重要特性：

#games-container div.game:hover { 
    transform: scale(1.25); 
    -webkit-transform: scale(1.25); 
    -ms-transform: scale(1.25); 
    z-index: 2; 
} 

See it here

Answer 2

添加z-index: 2 !important;到.flip-container:hover

.flip-container:hover { 
    transform: scale(1.25); 
    -webkit-transform: scale(1.25); 
    -ms-transform: scale(1.25); 
    z-index: 2 !important; 
} 

Fiddle