Internet Explorer 保留 3D 修复

Question

以下代码适用于除 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 class="flip1">
  <div class="card">
    <div class="face front">Front content</div>
    <div class="face back">Back content</div>
  </div>
</div>

你能帮我解决这个问题吗？

Answer 1

在所有版本的 IE 中，preserve-3d 不起作用。在 Microsoft Edge 中，它确实如此。

您可以对任何元素应用 3D 变换，但如果它的父元素也进行了 3D 变换，则变换将不起作用；该元素将被展平

所以 IE10 或 IE11 = 在 3D 中没有乐趣。

Answer 2

Internet Explorer 10 和 11 仅部分支持 3D 转换。（旧版本的 Internet Explorer 不支持此属性）。

Internet Explorer 10 和 11 'have only partial support' 因为：

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

回答你的问题

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）上。

Internet Explorer 保留 3D 修复

Internet Explorer Preserve 3D fix

html

css

internet-explorer-10

回答你的问题