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
IE中部分支援是指不支援transform-style:preserve-3d屬性。這可以防止嵌套 3D 轉換元素。

ie edge 支援
ie11 ie10 部分支援
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－