css3中的3D翻转问题
<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度后并没有隐藏，这是为什么，哪位大神帮我看看，先谢过啦。
