-o-backface-visibility 在 Opera 中不起作用？

Question

所以我正在处理悬停时的 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;
} 

Answer 1

是的，不工作。

Mozilla Developer Network 不支持 Opera。在 Opera Presto 规范中，它已经过时了。 Link to search