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

首先在X,Y轴上各移动80px,然后将元素放大150%，接着沿着Z轴方向顺时针旋转45°。

注意:缩放和旋转，都是通过元素的中心进行运转的，因为元素的默认transfrom-origin值为50% 50%。

通过嵌套元素可以实现与上面相同的效果

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

<div style="transform: translate(80px, 80px)">  

  <div style="transform: scale(1.5, 1.5)">  

      <div style="transform: rotate(45deg)"></div>  

  </div>  

</div>  

3D变换渲染
通常，元素都是依照平面进行渲染，并且被渲染的元素与它们的包含块的平面一致。平面的transform functions可以改变元素的表现，但是它仍然在与它的包含块相同的平面里进行渲染。

三维的变换会导致变换模型有着一个非0的Z组件(Z轴投射在屏幕的外面)。这样可以造成元素可以在不同的平面进行渲染，而不是在它的包含块的平面内进行渲染。这也可能会影响一个元素和与之有联系的另一个元素从前到后的渲染顺序，同时和导致与其他元素发生交叉。这样的表现依赖于这个元素是否为3D rendering context中的一员，正如下所说

上面的描述并不会完全准确的在WebKit中是实现。也许它会被改变来适应现在的是实现？See,Bug 19637
EXAMPLE4

CSS Code复制内容到剪贴板

div {   

  height: 150px;   

  width: 150px;   

}   

.container {   

  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>  

这次变换是一个围绕着垂直的Y轴进行的50度旋转。但是为什么这次变换为什么使的盒子便窄了呢？而不是变得立体呢？

perspective和perspective-origin属性可以通过使元素在Z轴变得更高而使元素显得更大，以此来增加观者在空间深度上的感知，同时也可以通过同样的方法使之显得越小。缩放比例的比例项公式是d/(d-Z),perspective的值就是从绘制平面到假设的观者眼睛的位置。

上图用图形解释了缩放比例是如何依赖于perspective属性和Z的值。在上面的那张图，Z值是d的一半。原始的圆圈(实线圆圈)出现在Z上(虚线圈)，为了是它呈现在画面中，圆圈通过以上两个要素按比例放大，最后在画面中呈现出来了放大的浅蓝色圆圈。下面的图形，圆圈通过比例进行缩小出现在原始位置后面的1/3圆圈，最后在画面中呈现出了缩小的浅蓝色圆圈。

（编辑：焦作站长网）

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