ie11下translateZ无效该如何解决？

Question

先上代码：

<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一致呢

Answer 1

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