transform: rotateY(50deg);
background: blue;
}
.child {
transfom-origin: top left;
transform: rotateX(40deg);
background-color: lime;
}
这个例子和前面的例子是相同的，除了加了一个transform-style: preserve-3d值在蓝色的元素上。蓝色的元素建立的3D渲染上下文，绿黄色元素是其中一员。现在蓝色和绿黄色元素都被容器中的perspective所影响，并且同时分享了一个相同的立体空间，所以浅绿色的元素在它的父元素上摆动。
元素在同样的3D渲染上下文中可能会彼此相交。
在3D渲染上下文中不变换的元素在Z=0的平面上也有可能与变换元素相交。
在3D渲染上下文里，在应用完积累的变换后，没有相交的元素的渲染顺序基于在Z轴上的位置。元素在Z轴的位置相同则渲染顺序由层叠上下文决定。
EXAMPLE8
CSS Code复制内容到剪贴板
div {
width: 150px;
}
.container {
height: 145px;
background-color: rgba(0,0,0,0.3);
border: 1px solid black;
transform-style: preserve-3d;
perspective: 500px;
}
.container>div {
position: absolute;
left: 0;
}
.container> :first-child {
transform: rotateY(45deg);
background-color: orange;
top: 10px;
height: 135px;
}
.container> :last-child {
transform: translateZ(40px);
background-color: rgba(0,0,255,0.75);
top: 50px;
height: 100px;
}
XML/HTML Code复制内容到剪贴板
<div class="container">
<div></div>
<div></div>
</div>
这个例子展示了，在3D渲染上下文中元素是可以相交的。容器元素为自己创建了3D渲染上下文并且他有两个子元素。子元素互相相交，同时橘黄色的元素也与容器相交。
使用立体变换，让一个元素的背面朝着观者是完全有可能的。3D变换元素在两面展示相同的内容，所以反面看起来就像镜子中的正面(就像元素映射在一片镜子上一样)。通常，元素的反面朝着观者都会隐藏。然而，backface-visiblity:hidden属性允许作者使其不可见当元素的反面朝着观者时。如果一个带有backface-visiblity:hidden属性的元素是有效的，那么他的前面和背面便会交替的隐藏，然后，只有当前面朝向观者时元素才是可见的。
