深入解读CSS3中transform变换模型的渲染

这个例子表现了嵌套的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;   

  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>  

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!