2
所以我对这个悬停CSS 3D转换工作...-o-backface-visibility不在Opera中工作？
作品：的Webkit，FF 不工作：歌剧 未经测试： IE
从我可以从这里的Chris的文章中看出，Opera支持-o-backface-visibility（请参阅底部的浏览器支持表）。尽管在他的例子中，该物业似乎并不坚持在Opera中。但是，他似乎管理着悬停在Opera上的后备，所以如果我能够得到那么远，我会满足，但我还没有到那里。
http://css-tricks.com/almanac/properties/b/backface-visibility/
小提琴：http://jsfiddle.net/uxable/YHeKX/
（？笏......有一个在我的小提琴代码粘贴没有简单的办法必须有...）
<div class="flip">
<div class="card">
<div class="face front">Front</div>
<div class="face back">Back</div>
</div>
</div>
AND
.flip {
position: relative;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
-o-perspective: 1000;
margin: 0 0 20px 0;
}
.card {
width: 200px;
height: 50px;
position: relative;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
-moz-transform-style: preserve-3d;
-moz-transition: 0.5s;
-ms-transform-style: preserve-3d;
-ms-transition: 0.5s;
-o-transform-style: preserve-3d;
-o-transition: 0.5s;
}
.flip:hover .card {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
}
.face {
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: white;
line-height: 50px;
text-align: center;
}
.no-hide .face {
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
-ms-backface-visibility: visible;
-o-backface-visibility: visible;
}
.front {
background: red;
z-index: 10;
}
.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
background: green;
}
.flip:hover .front {
z-index: 0;
}
其实，重建文章演示中的一个之后 - 这可能是一个更好的解决方案，不需要任何jQuery和工作（虽然没有转变 - 在Opera）：jsfiddle.net/uxable/acbnS – uxable
更新了原帖代码在Opera解决方案中非js工作但不理想 – uxable