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

Question

微软在他们的网站上说

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

有人可以举一个应该如何应用的例子吗？

Answer 1

要使用 来创建 3D 对象transform-style: flat，您需要从容器 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 结构，所以没有带有转换的 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/

Answer 2

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

小提琴

使用 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 属性的角度。