javascript - ie11下translateZ无效该如何解决？

问题描述

问 题

先上代码：

<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;

这篇关于javascript - ie11下translateZ无效该如何解决？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！