css3中的3D翻转问题

Question

<p class="container">
    <p class="side">
        <p class="front">
           <!-- 正面 -->
        </p>
        <p class="back">
           <!-- 反面 -->
        </p>
</p>

.container {
   perspective: 1000;
  }
.container:hover .side{  
   transform: rotateY(180deg);
}
.container, .front, .back {
  width: 320px;
  height: 480px;
}
.side {
  transition: 0.6s;
  transform-style: preserve-3d;  /*让其子元素有3D翻转的效果。*/
  position: relative;
}
.front, .back {
  backface-visibility: hidden; /*将反转了180度的隐藏*/
  -ms-backface-visibility: hidden;
  position: absolute;
}
.front {
  background-color: red;
}
.back {
  transform: rotateY(180deg);
  background-color: blue;
}
 

比较郁闷的是，在其他浏览器都能正常显示效果，但是IE不行，backface-visibility: hidden;这句单独在IE下测试是可以用的，但是这里放一起就出问题了，在IE下它翻转180度后并没有隐藏，这是为什么，哪位大神帮我看看，先谢过啦。

Answer 1

http://caniuse.com/#search=backface-visibility
Partial support in IE refers to not supporting the transform-style: preserve-3d property. This prevents nesting 3D transformed elements.

ie edge支持
ie11 ie10 Partial support
ie9- 不支持

Answer 2

不知道你的 IE 目标版本是多少，这是我以前写给别人看的 Demo，在 IE 下应该是没问题的（不过我现在只有 windows 10 的 IE Edge，低版本我没办法测试）http://codepen.io/nightire/pen/azggOP

需要注意的是 vendor prefix 的事情，我这个 Demo 里是有用 autoprefixer 的。

Answer 3

写css3的属性的时候，建议把前缀写全了，支持的情况比较好。

－webkit－

－ms－

－moz－