CSS變換的Chrome和IE

Question

閃爍我試圖做一個div出現具有隱藏它通過rotate和backface-visibility.被迫的問題是，它閃爍，然後一秒鐘之後消失。這發生在Chrome上。在IE11它根本不顯示...

http://jsfiddle.net/1xq96btg/

它在Firefox正常工作。

編輯︰我只使用backface-visibilty當我包括它的變種時，它變得更加不穩定和奇怪的行爲。

編輯2：z-index似乎並沒有被任何幫助。

HTML

<div class="one-third-box" onclick="location.href='#'"> 
    <div class="overlay"></div> 
    <img src="http://www.example.com/image/jpg" /> 
    <div class="box-description">this is a test description</div> 
</div> 

CSS

.one-third-box { 
    float: left; 
    margin-bottom: 2px; 
    margin-right: 0.2%; 
    width: 33.2%; 
    position:relative; 
    perspective: 1000; 
    cursor:pointer; 
} 
.one-third-box:hover { 
    transform: rotateY(180deg); 
    transition: 0.6s; 
    transform-style: preserve-3d; 
} 
.one-third-box:hover img { 
    -moz-transform: scaleX(-1); 
    -o-transform: scaleX(-1); 
    -webkit-transform: scaleX(-1); 
    transform: scaleX(-1); 
    filter: FlipH; 
    -ms-filter:"FlipH"; 
    position:relative; 
    top:-1px; 
} 
.one-third-box:hover .overlay { 
    backface-visibility: hidden; 
} 
.box-description { 
    backface-visibility: hidden; 
    background: none repeat scroll 0 0 #2f5d70; 
    bottom: 0; 
    color: #fff; 
    font-size: 18px; 
    font-weight: lighter; 
    height: 38%; 
    padding-left: 10%; 
    padding-top: 6%; 
    position: absolute; 
    transform: rotateY(-180deg); 
    width: 100%; 
    padding-right: 10%; 
} 
.overlay { 
    position:absolute; 
    width:100%; 
    height:100%; 
    background:url('images/overlay.png'); 
} 
.one-third-box > img { 
    width: 100%; 
} 

Answer 1

我把它通過改變CSS有點......好吧，很多工作。 我假定這是由重疊的元件和/或該transform-style: preserve-3d;線之間不一致的硬件加速引起的。無論哪種方式，我創建了一個似乎適用於我的片段。我還選擇使用CSS動畫而不是轉換，因爲它使得它在這種情況下更具可讀性。

* { margin: 0; padding: 0; } /* Simple CSS reset */ 
 

 
.one-third-box { 
 
    position: relative; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    width: 33.2%; 
 
} 
 

 
.one-third-box > img { 
 
    transform-style: flat; 
 
    width: 100%; 
 
    transform: translate3d(0,0,0); /* Fixes blur from scaling */ 
 
} 
 

 
.box-description { 
 
    position: absolute; 
 
    box-sizing: border-box; 
 
    backface-visibility: hidden; 
 
    background: none repeat scroll 0 0 #2f5d70; 
 
    bottom: 0; 
 
    color: #fff; 
 
    font-size: 18px; 
 
    font-weight: lighter; 
 
    height: 38%; 
 
    padding-left: 10%; 
 
    padding-top: 6%; 
 
    width: 100%; 
 
    padding-right: 10%; 
 
    transform: rotateY(-180deg); 
 
} 
 

 
/* ---------------------- Hover effects ---------------------- */ 
 
.one-third-box:hover > img, 
 
.one-third-box:hover > .box-description { 
 
    -webkit-animation: flip 0.6s; 
 
    animation: flip 0.6s; 
 
    transform: rotateY(0deg); 
 
} 
 

 
/* flip animation */ 
 
@-webkit-keyframes flip { 
 
    from { transform: rotateY(180deg); } 
 
    to { transform: rotateY(0deg); } 
 
} 
 
@keyframes flip { 
 
    from { transform: rotateY(180deg); } 
 
    to { transform: rotateY(0deg); } 
 
}

<div class="one-third-box" onclick="location.href='#'"> 
 
    <div class="overlay"></div> 
 
    <img src="http://www.surgemedia.ie/portfolio-images/alci-clear.png" /> 
 
    <div class="box-description">this is a test description</div> 
 
</div>