background: #ccc;
}
.transformed {
transform: rotateY(50deg);
background-color: blue;
}
.child {
transform-origin: top left;
transform: rotateX(40deg);
background-color: lime;
}
JavaScript Code复制内容到剪贴板
<div class="container">
<div class="transformed">
<div class="child"></div>
</div>
</div>
这个例子表现了嵌套的3D变换元素在缺少transform-style: preserve-3d时是如何渲染的。蓝色的div和之前的例子变换结果是一样的，都是被父元素的perspective属性所影响。绿黄色的元素同样有绕着X轴进行旋转的3D变换。然而，绿黄色元素在它的父元素所在平面进行渲染因为他不是3D渲染上下文中的一员；父元素是二维的。
按照如下规则，元素可建立并参与在3D渲染上下文中:
3D渲染上下文通过有着transform-style: preserved-3d值的变换元素创建并且它自己并不是3D渲染上下文中的一员。这样的元素通常都是一个包含块。一个元素建立3D渲染上下文同样也参与其中。
一个有着transform-style: preserved-3d值的元素，参与在它自己创建的3D渲染上下文中，扩大了3D渲染上下文，而不是建立了一个新的3D渲染上下文。
一个元素参与3D渲染上下文，除非它的包含块建立了3D渲染上下文或者扩展了3D渲染上下文
最后的变换结果通常是在3D渲染上下文中渲染的元素3D变换模型的积累，如下：
从具体的模型开始
对于每一个在3D变换根元素和元素之间的包含块，考虑以下几点：
1.在元素的包含块上积累perspective matrix(如果可以的话)。包含块并不一定要成为3D渲染上下文中的一员
2.元素的offset-parent是相对于它的包含块的，元素应用计算后的移动值等同于垂直水平移动。
3.累加变换效果
EXAMPLE7
CSS Code复制内容到剪贴板
div {
height: 150px;
width: 150px;
}
.container {
perspective: 500px;
border: 1px solid black;
background: #ccc;
}
.transformed {
transform-style: preserve-3d;
