【CSS】ie11下translateZ无效该如何解决？

• Z时代
• 2024-01-10
• 分类：技术分享

先上代码：

<div class="container">
    <div class="front side">正</div>
    <div class="back side">反</div>
</div>

body{
    perspective: 800px;
}
.container{
    transform-style:preserve-3d;
    position: absolute;
    left: 100px;
    top: 50px;
}
.side{
    width: 1000px;
    height: 500px;
    position: absolute;
}
.front {
    transform: translateZ(10px);
    background: red;
}
.back{
    transform: translateZ(-10px);
    background: yellow;
}

然后是结果：
chrome下

ie11下

如何让ie11和chrome一致呢？

回答：

ie不支持 transform-style: preserve-3d;
可以container中加一个 perspective: 800px;

回答：

放弃使用IE，提示用户使用其他浏览器。
我觉得微软最失败的产品之一就是IE，居然连“转到选中的无链接URL”都不支持。

以上是 【CSS】ie11下translateZ无效该如何解决？ 的全部内容， 来源链接： utcz.com/a/154113.html