Question

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

 #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+和IE 10+支持无前缀的背面可见性。 Opera（Blink，15岁以上），Chrome，Safari，iOS和Android都需要 -webkit-背面能见度

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

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

1 个答案: