webkit中的CSS轉換問題

Question

我正在嘗試使用CSS3動畫創建一個小小的效果問題。

我有一個投資組合項目的網格，懸停時，翻轉顯示有關每個項目的一些信息。

這在FF中正常工作，但在Chrome中它有一點小錯誤。

我創建了一個簡單的小提琴，顯示問題http://jsfiddle.net/NX7GM/2/和下面是使用的代碼;

HTML

<a href="#"> 

    <div class="flipper"> 

     <div class="front"> 

      <img src="http://placehold.it/300/300" alt="#"/> 

     </div><!--/.front--> 

     <div class="back"> 

      <div class="table"> 

       <div class="table-cell"> 

        <h2 class="big-title">Title</h2> 

       </div><!--/.table-cell--> 

      </div><!--/.table--> 

     </div><!--/.back--> 

    </div><!--/.flipper--> 

</a> 

CSS

*, *:after, *:before { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box 
} 

.work-item{ 
    display:inline-block; 
    margin:0 30px 30px 0 
} 

.flip-container { 
    perspective: 1000; 
    -webkit-perspective:1000; 
    transform-style: preserve-3d; 
    -webkit-transform-style: preserve-3d; 
} 

.flip-container:hover .back { 
    transform: rotateY(0deg); 
    -webkit-transform: rotateY(0deg); 
} 

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

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

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

.front, .back { 
    backface-visibility: hidden; 
    -webkit-backface-visibility:hidden; 
    transition: 0.6s; 
    -webkit-transition: 0.6s; 
    transform-style: preserve-3d; 
    -webkit-transform-style: preserve-3d; 
    position: absolute; 
    top: 0; 
    left: 0; 
    border:#fff 4px solid; 
    box-shadow: 0px 2px 6px -2px #999; 
} 

.front { 
    z-index: 2; 
    transform: rotateY(0deg); 
    -webkit-transform: rotateY(0deg); 
} 

.back { 
    background:#bfdb00; 
    background: -webkit-gradient(radial, center center, 0, center center, 460, from(#c0dc00), to(#a3bb00)); 
    background: -webkit-radial-gradient(circle, #c0dc00, #a3bb00); 
    background: -moz-radial-gradient(circle, #c0dc00, #a3bb00); 
    background: -ms-radial-gradient(circle, #c0dc00, #a3bb00); 
    transform: rotateY(-180deg); 
    -webkit-transform: rotateY(-180deg); 
    padding:50px; 
    text-align:left 
} 

.back .big-title{ 
    font-size:20px; 
    text-shadow:1px 1px 1px rgba(0, 0, 0, .3); 
    letter-spacing:normal; 
    line-height:24px; 
    margin-bottom:10px 
} 

Answer 1

發生這種情況，因爲這兩個.front和.back被絕對定位（導致包含a的內容超出正常流程並且其顯示內聯）而崩潰。

由於.flip-container具有明確的高度，因此您可以將a設置爲具有100％的高度（並將其顯示更改爲阻擋）。這使得它佔據容器的高度/寬度並且允許整個卡被徘徊。 Here's an example.

.flip-container a { 
    display: block; 
    height: 100%; 
}