Internet Explorer保留3D修复 [英] Internet Explorer Preserve 3D fix

问题描述

以下代码在IE.10以外的所有浏览器中均适用.

The following code works in all browsers except for IE.10.

MSDN网站说以下内容(我不知道如何申请):

MSDN website says the following (which I do not understand how to apply):

注意W3C规范为此属性定义了一个关键字keep-3d，它指示不执行展平.目前，Internet Explorer 10不支持preserve-3d关键字.您可以通过以下方式解决此问题:将子元素的正常变换手动应用于每个子元素，并将其应用于子元素.

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.

https://msdn. microsoft.com/en-gb/library/ie/hh673529(v=vs.85).aspx

我的代码(出于其他原因，我正在使用CSS选择器)

My code (I'm using CSS selectors for other reasons):

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仅部分支持3D变换. (较早版本的Internet Explorer 不支持此属性).

Internet Explorer 10 and 11 only partially support 3D transforms. (Older versions of Internet Explorer do not support this property).

Internet Explorer 10和11仅部分支持"，因为:

Internet Explorer 10 and 11 'have only partial support' because:

不支持transform-style:preserve-3d属性.这 防止嵌套3D变换的元素.

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

---

继续阅读

建议将此属性在Internet Explorer的下一版本中实现，因此不幸的是，当前的IE并不真正支持任何好"或复杂" 3D功能.

This property is suggested to be implemented in the next version of internet explorer, so unfortunately the current IE doesn't really support any 'good' or 'complex' 3D functionality.

由于IE会忽略"此属性，因此您可能会显示一条标语消息，以通知用户使用Chrome或Firefox以获得更好的体验(这也意味着您通常必须实施更少的浏览器黑客来支持IE ).

Since IE will 'ignore' this property, you may be able to display a message of banner to inform users to use Chrome or Firefox for better experience (it also means you will have to implement less browser hacks to support IE in general).

注意W3C规范为 此属性，表示未执行展平.在 这次，Internet Explorer 10不支持preserve-3d 关键词.您可以通过手动应用父项来解决此问题 元素的转换，除了 子元素的法线变换.

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)上.

This is suggesting to apply the transform of the parent manually on the child element. So the 3d transform stated on your parent (.flip1) should also be placed on your child element(s) (.back and .front) as well.

这篇关于Internet Explorer保留3D修复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！