首页 > 开发 > CSS > 正文

ie11下translateZ无效该如何解决?

2017-09-12 09:36:54  来源: 网友分享

先上代码:

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