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

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

1 个答案: