html – Internet Explorer保存3D修复

概述以下代码适用于除IE.10之外的所有浏览器. MSDN网站说以下(我不明白如何申请)： 注意W3C规范为此属性定义了一个关键字值为preserve-3d,表示未执行平坦化.此时,Internet Explorer 10不支持preserve-3d关键字.除了子元素的正常变换之外,您还可以通过手动将父元素的变换应用于每个子元素来解决此问题. https://msdn.microsoft.com/en 以下代码适用于除IE.10之外的所有浏览器.

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 >  <div >    <div >Front content</div>    <div >Back content</div>  </div></div>

你能帮我一下吗

非常感谢！

解决方法 Internet Explorer 10和11仅部分支持3D转换. (较旧版本的Internet Explorer不支持此属性).

Internet Explorer 10和11“只有部分支持”,因为：

not supporting the transform-style: preserve-3d property. This
prevents nesting 3D transformed elements.

further Reading

该属性建议在下一个版本的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)上.

总结

以上是内存溢出为你收集整理的html – Internet Explorer保存3D修复全部内容，希望文章能够帮你解决html – Internet Explorer保存3D修复所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。