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中不管用
MSDN的文档告诉我们，backface-visibility是被支持的，IE10以后就被支持了。
Do not use the Microsoft vendor prefix ("-ms-") before the backface-visibility property. It is supported unprefixed in Internet Explorer 10 and later.
根据Modern IE的资料，不被支持的是transform-style: preserve-3d;。IE全系列均不支持preserve 3d，到了Edge才被支持。
Internet Explorer 10 does not support the preserve-3d keyword. You can work around this by manually applying the parent element’s transform to each of the child elements in addition to the child element’s normal transform.
其实transform-style: preserve-3d可以通过挨个把父级容器的transform应用到子容器上面的方式来完成。