MSDN网站说以下(我不明白如何申请)：
注意W3C规范为此属性定义了一个关键字值为preserve-3d,表示未执行平坦化.此时,Internet Explorer 10不支持preserve-3d关键字.除了子元素的正常变换之外,您还可以通过手动将父元素的变换应用于每个子元素来解决此问题.
https://msdn.microsoft.com/en-gb/library/ie/hh673529(v=vs.85).aspx
我的代码(我使用CSS选择器的其他原因)：
div[class^="flip"] {
display: inline-block;
}
div[class^="flip"] {
-webkit-perspective: 800;
-moz-perspective: 800;
-ms-perspective: 800;
-o-perspective: 800;
perspective: 800;
width: 313px;
height: 480px;
position: relative;
margin-right: 10px;
margin-left: 10px;
}
div[class^="flip"] .card.flipped {
-webkit-transform: rotatey(-180deg);
-moz-transform: rotatey(-180deg);
-o-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
div[class^="flip"] .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
div[class^="flip"] .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 2;
text-align: center;
}
div[class^="flip"] .card .front {
position: absolute;
z-index: 1;
background: #F5F5F5;
border: #DDD 1px solid;
}
div[class^="flip"] .card .back {
-webkit-transform: rotatey(-180deg);
-moz-transform: rotatey(-180deg);
-o-transform: rotatey(-180deg);
transform: rotatey(-180deg);
background: #F5F5F5;
border: #DDD 1px solid;
}
<div class="flip1">
<div class="card">
<div class="face front">Front content</div>
<div class="face back">Back content</div>
</div>
</div>
你能帮我一下吗
非常感谢！
解决方法
Internet Explorer 10和11“只有部分支持”,因为：
not supporting the transform-style: preserve-3d property. This
prevents nesting 3D transformed elements.
该属性建议在下一个版本的Internet Explorer中实现,所以不幸的是,目前的IE并不真正支持任何“好”或“复杂”的3D功能.
由于IE将“忽略”此属性,您可能会显示横幅消息,通知用户使用Chrome或Firefox以获得更好的体验(这也意味着您必须实现更少的浏览器黑客来支持IE).
在回答你的问题
Note The W3C specification defines a keyword value of preserve-3d for
this property,which indicates that flattening is not performed. At
this time,Internet Explorer 10 does not support the preserve-3d
keyword. You can work around this by manually applying the parent
element’s transform to each of the child elements in addition to the
child element’s normal transform.
这是建议在子元素上手动应用父的变换.因此,您父级(.flip1)上的3d变换也应放置在您的子元素(.back和.front)上.
