javascript - backface-visibility:hidden 不支持IE么？有没有别的解决办法-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

ringa_lee 2017-04-11 09:22:17

[JavaScript讨论组]

678

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

ringa_lee

全部回复(1)

PHP中文网2017-04-11 09:24:17 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应用到子容器上面的方式来完成。

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>