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

介绍

transform是通过一系列矩阵变换完成的，scale等transform-function都是对matrix的封装。

w3里的解释是，transform基于可视化格式模型（visual formatting model，这样翻译对不对啊）并为其绘制出一个坐标系，而且所有在这个坐标系内进行的操作，如向右向下，都是在这个坐标系内以像素方式表示

元素设置了transform并不会改变元素所在的文档流，其布局仍然受盒模型支配，因此这里的变换的效果是可以与浮动、定位并存的。

当元素设置了transform后，会为该元素定义一个坐标系，并且在该坐标系内进行矩阵变换，将变换结果映射到用户坐标系（也就是实际上的上下文）中。

多个矩阵变换函数将依次从左到右计算，如transform:translate(80px, 80px) scale(1.5, 1.5)，浏览器会先计算位移，再缩放1.5倍。以下两种代码效果相同：

html

</div>

1. <div style="transform: translate(80px, 80px)">   
2.   <div style="transform: scale(1.5, 1.5)">   
3.        <div style="transform: rotate(45deg)"></div>   
4.   </div>   
5. </div>  

</div> </div>

html

</div>

1. <div style="transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);">   
2.  </div>  

</div> </div>

坐标原点的位置受属性 transform-origin的影响。

如果是3D变换，则还会将其加入一个3D渲染上下文（3D rendering context）。根据个人理解，无论有多少个转换为3D的元素，其将始终在这个上下文内并可能相互影响，类似一个文档中的多个被绝对定位的元素。

任何非none的transform值都会导致一个堆叠上下文（stacking context）和包含块（containing block）的创建。

变换渲染模型
为transform属性指定一个除了none的值便会在元素上创建一个新的局部坐标系统并且应用于这个元素。通过元素的变换模型，元素可以绘制渲染出自己的坐标系统。变换是可以积累的。也就是说，元素可以通过父元素的坐标的系统来建立自己的局部坐标系统。从用户的视角看，一个元素不但可以从它的祖先元素上有效的积累transform属性，而且也可以给自己增加transform属性并应用与自己。这些变换的积累为元素描绘出了当前的变换模型。

带有两个轴的坐标空间：X轴水平向右为正，Y轴垂直向下为正。立体的变换函数增加了坐标空间将其延生至了三维空间，增加的Z轴垂直与屏幕，并且面向观察者的方向为正(也就是电脑屏幕前的我们)。如图。

变换模型通过如下的transform和transform-origin属性进行计算

从具体的模型开始
通过transfrom-origin的X,Y,Z计算值进行移动
从左到右复合应用在transform属性中的transform functions
使之前设置的transform-origin的值无效并进行移动
EXAMPLE1

</div>

1. div {   
2.   transform: translate(100px,100px);   
3. }  

</div> </div>

EXAMPLE2

</div>

1. div {   
2.   height: 100px;   
3.   width: 100px;   
4.   transform-origin: 50px 50px;   
5.   transform:rotate(45deg)   
6. }  

</div> </div>

transform-origin通过在X,Y轴方向上各移动50px来移动原点。元素沿着原点顺时针旋转了45°。当所有的transform functions都应用后，平移后的原点在X,Y轴上又各移动了-50px,回到了原来的位置。如图

理解
上面的话的意思就是，transform-origin的起始点是在原点的位置，旋转围绕着transform-origin在转，移动transform-origin是从原点开始的，而不是transform-origin的默认位置开始移动的(默认为元素中心，上例恰好也刚刚好移动到元素的中心位置)，transform-origin移动完后，并在元素上已经将transform functions应用完后，平移后的原点便会回到原来的位置，也就是说，下次改变transform-origin的位置仍然是从起始点算起（也就是之前的原点）。

EXAMPLE3
以下所涉图片深绿色部分均是没有使用变换属性时元素的本来样子。

</div>

1. div {   
2.   height: 100px;   
3.   width: 100px;   
4.   transform: translate(80px,80px) scale(1.5,1.5) rotate(45deg);   
5. }   

</div> </div>

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

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

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

</div>

1. <div style=