所以我在悬停时使用这个 CSS 3D 转换......
作品： Webkit，FF 不工作： Opera 未经测试： 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>
和
.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;
}