javascript - CSS3 属性 'backface-visibility' 不适用于任何 IE 版本

Question

我也想在 IE 中实现下面的动画。要求是像硬币一样旋转图像，当它旋转到另一侧时它应该显示其他图像。在 IE 中，我想问题出在 Backface-visibility 不确定。

http://codepen.io/anon/pen/OXRoXJ

 #product{
width: 300px;
height: 250px;
top: 0px;
left: 0px;
-webkit-perspective:1000px;
-moz-perspective:1000px;
perspective: 1000px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: all 1.0s linear;
border-spacing: 0;
}
.face img{
  width: 100%;
     height: 100%;
       backface-visibility: hidden;
     -moz-backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
 }
 .back img{
    display: block;
    transform: rotateY(180deg);
   -webkit-transform: rotateY(180deg);
     text-align: center;
    width: 218px;
    height: 219px;

 backface-visibility: hidden;
 -moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}

它可以在 Chrome、Firefox 和 Safari 上正常工作，但不能与任何 IE 版本一起使用。 任何帮助，将不胜感激。提前致谢。

Answer 1

Firefox 10+ and IE 10+ support backface-visibility with no prefix. Opera (post Blink, 15+), Chrome, Safari, iOS, and Android all need -webkit-backface-visibility

浏览器支持: https://css-tricks.com/almanac/properties/b/backface-visibility/