IE 10 中缺少 preserve-3d 属性的解决方法答案

【问题标题】：Workaround for missing preserve-3d property in IE 10IE 10 中缺少 preserve-3d 属性的解决方法
【发布时间】：2014-02-01 10:17:58
【问题描述】：

微软在他们的website上说

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

有人可以举例说明应该如何应用吗？

【问题讨论】：

标签： css internet-explorer-10

【解决方案1】：

要使用transform-style: flat 创建 3D 对象，您需要删除容器 div 中的变换：

.object3d {
  transform-style: preserve-3d; // remove to get the flat behavior in all browers
  transform: translateX(80px) rotateY(-35deg); // cut the container transforms.
}

然后您可能需要扁平化您的 html 结构，因此 no 带有变换的 div 位于带有变换的 div 中。

然后将变换操作（以前在容器 div 上）粘贴到所有面的相对变换之前。

之前：

.object3d__bottom { 
  transform: translateY(50px) rotateX(90deg);
}

之后：

.object3d__bottom { 
  transform: translateX(80px) rotateY(-35deg) translateY(50px) rotateX(90deg);
}

演示：http://jsbin.com/ICuVihi/17/

【讨论】：

是的，这行得通。但是，如果您尝试创建一个旋转动画来一个接一个地显示所有立方体的面，它不会按预期工作，因为面似乎总是采用最短的方式来获得新的旋转。
是的，变换操作被计算为一个matrix3d，当使用css动画或过渡时，面在2个矩阵之间进行补间。一种解决方法是为动画的每一帧在 javascript 中为每个人脸生成变换样式。您可以使其在 IE10 和 11 中工作，但并不意味着您应该。这需要付出很多额外的努力。

【解决方案2】：

我会说这是不可能的。（无论微软怎么说）。子元素的展平不能通过应用进一步的变换来撤消。请看以下演示：

fiddle

使用 HTML：

<div class="base" id="base1">Base1
    <div class="inner" id="inner1">1</div> 
    <div class="inner" id="inner2">2</div>
    <div class="inner" id="inner3">3</div>
    <div class="inner" id="inner4">4</div>
    <div class="inner" id="inner5">5</div>
    <div class="inner" id="inner6">6</div>
    <div class="inner" id="inner7">7</div>
    <div class="inner" id="inner8">8</div>
    <div class="inner" id="inner9">9</div>
</div>
<div class="base" id="base2">Base2
    <div class="inner" id="inner1">1</div>
    <div class="inner" id="inner2">2</div>
    <div class="inner" id="inner3">3</div>
    <div class="inner" id="inner4">4</div>
    <div class="inner" id="inner5">5</div>
    <div class="inner" id="inner6">6</div>
    <div class="inner" id="inner7">7</div>
    <div class="inner" id="inner8">8</div>
    <div class="inner" id="inner9">9</div>
</div>
<div class="base" id="base3">Base3
    <div class="inner" id="inner1">1</div>
    <div class="inner" id="inner2">2</div>
    <div class="inner" id="inner3">3</div>
    <div class="inner" id="inner4">4</div>
    <div class="inner" id="inner5">5</div>
    <div class="inner" id="inner6">6</div>
    <div class="inner" id="inner7">7</div>
    <div class="inner" id="inner8">8</div>
    <div class="inner" id="inner9">9</div>
</div>

和 CSS：

.base {
   width: 200px;
   height: 250px;
   display: block;
   -webkit-transform: rotatey(-45deg);
   transform: rotatey(-45deg);
   border: solid 2px black;
}

#base1 {
   -webkit-transform-style: preserve-3d;
}

#base2 {
   left: 300px;
   top: 0px;
   position: absolute;
}

#base3 {
   left: 600px;
   top: 0px;
   position: absolute;
   -webkit-transform: rotatey(-88deg);
   transform: rotatey(-88deg);
   -webkit-transform-style: preserve-3d;
}

.inner {
   border: solid 1px black;
   height: 20px;
   background-color: red;
}

#inner1 {
   -webkit-transform: rotatey(0deg);
   transform: rotatey(0deg);
}
#inner2 {
   -webkit-transform: rotatey(20deg);
   transform: rotatey(20deg);
}
#inner3 {
   -webkit-transform: rotatey(40deg);
   transform: rotatey(40deg);
}
#inner4 {
   -webkit-transform: rotatey(60deg);
   transform: rotatey(60deg);
}
#inner5 {
   -webkit-transform: rotatey(80deg);
   transform: rotatey(80deg);
}
#inner6 {
   -webkit-transform: rotatey(100deg);
   transform: rotatey(100deg);
}
#inner7 {
   -webkit-transform: rotatey(120deg);
   transform: rotatey(120deg);
}
#inner8 {
   -webkit-transform: rotatey(140deg);
   transform: rotatey(140deg);
}
#inner9 {
   -webkit-transform: rotatey(160deg);
   transform: rotatey(160deg);
}

这会创建一个旋转 -45 度的基本 div。在这个上设置了几个 div，具有不同的旋转角度。在第一个系列中，在 webkit 浏览器中看到，孩子有一个角度，给他水平位置和原始大小（比父母宽，旋转）。在第二个系列中，如果没有保留 3d，则子级不能超过父级（表观）大小。第三个系列是一个角落的例子：在几乎 90 度的角度，父母消失了，但孩子仍然可见。

这在 IE 中不起作用，表明无法找到恢复 preserve-3d 属性的角度。

【讨论】：