图形表现了向上移动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;
