.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度后并没有隐藏，这是为什么，哪位大神帮我看看，先谢过啦。