先上代码:
<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;