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>