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

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

---

Internet Explorer 10 和 11 '只有部分支持'，因为：

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

---

further Reading

建议在下一个版本的 Internet Explorer 中实现此属性，因此很遗憾，当前的 IE 并不真正支持任何“好”或“复杂”的 3D 功能。

由于 IE 将“忽略”此属性，您可能会显示一条横幅消息以通知用户使用 Chrome 或 Firefox 以获得更好的体验（这也意味着您将不得不实施较少的浏览器黑客攻击以支持一般的 IE )。

---

回答您的问题

注意 W3C 规范定义了一个关键字值 preserve-3d 用于 此属性，表示不执行展平。在 这次，Internet Explorer 10 不支持 preserve-3d 关键词。您可以通过手动应用父级来解决此问题 元素对每个子元素的变换，除了 子元素的正常变换。

这是建议在子元素上手动应用父元素的变换。因此，在您的父元素 (.flip1) 上声明的 3d 变换也应该放在您的子元素（.back 和 .front）上。

Answer 2

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

您可以对任何元素应用 3D 变换，但如果它的父元素也是 3D 变换，那么变换将不起作用；元素将被展平

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