DEMO
.rBox{
width: 300px;
height: 300px;
transform: perspective(400px) rotateX(0deg);
position: relative;
transition: transform .5s;
transform-style: preserve-3d;
}
.f,
.b{
backface-visibility: hidden;
}
.rBox:hover {
transform: perspective(400px) rotateX(180deg);
}当转动rBox的时候backfadce-visibility:hidden;在IE中不管用
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
MSDN的文档告诉我们，
backface-visibility是被支持的，IE10以后就被支持了。根据Modern IE的资料，不被支持的是
transform-style: preserve-3d;。IE全系列均不支持preserve 3d，到了Edge才被支持。其实
transform-style: preserve-3d可以通过挨个把父级容器的transform应用到子容器上面的方式来完成。