Question

上说

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

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

Answer 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结构，所以没有带有变换的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

我会说这不可行。（无论微软说什么）。使用进一步的变换不能撤消子元素的flatening。请参阅以下演示：

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属性的角度是不可行的。

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

2 个答案: