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

通常假设观察者眼睛的位置在画面的中央。但是，如果想的话，这个位置也是可以移动的-例如，如果一个网页包含了很多图画那么大家通过设置perspective-origin的值来分享相同的视角。

图形表现了向上移动perspective origin对表现效果的影响

透视模型按如下进行计算：

1.从具体的模型开始
2.通过 设置的perspective-origin的X,Y的计算值进行移动
3.通过获得perspective属性的值应用在模型上
4.使之前设置的perspective- origin的值无效并进行移动
EXAMPLE5
这个例子表现了透视可以被用来表达立体的变换从而显现出更多真实的细节

CSS Code复制内容到剪贴板

div {   

  height: 150px;   

  width: 150px;   

}   

.container {   

  perspective: 500px;   

  border: 1px solid black;   

  background-color: #ccc;   

}   

.transformed {   

  transform: rotateY(50deg);   

  background-color: blue;   

}   

XML/HTML Code复制内容到剪贴板

<div class="container">  

  <div class="transformed"></div>  

</div>  

里面的元素和在前面的例子中有着相同的变换，但是它的渲染被父元素上的perspective属性所影响。透视给予了一个显现的深度，导致顶点有了Z坐标(靠近观察者)使其在X,Y轴被放大，并且更进一步的(在负的Z轴上)也会被缩小。
一个并不包含在3D渲染上下文中的立体变换元素有着合适的transform值进行渲染，但是也不会与其他任何元素发生相交。在这个EXAMPLE4中的立体变换可以被考虑为一种绘画效果，就像平面中的变换。相似的，变换不会影响渲染命令。举个例子，在transform中设置Z的值使元素进行移动可能使元素变得更大，但是并不会导致元素去渲染它前面没有设置Z值的元素

一个包含在3D渲染上下文的立体变换元素在同样的3D渲染上下文中可以与其他元素相交;参与相同3D渲染上下文的元素，根据它们的变换结果，可能会互相隐藏或者相交。在同样的3D坐标空间摆放，使它们好像全部都是兄弟姐妹。一个元素在立体空间中摆放的位置决定于从建立3D渲染上下文的包含块中积累的变换模型所决定。
EXAMPLE6

CSS Code复制内容到剪贴板

div {   

  height: 150px;   

  width: 150px;   

}   

.container {   

  perspective: 500px;   

  border: 1px solid black;   

  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>  

（编辑：焦作站长网）

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