javascript - backface-visibility:hidden 不支持IE么？有没有别的解决办法

Question

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中不管用

Answer 1

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应用到子容器上面的方式来完成。