CSS3 transform

6bc276770efd787f8f355ece914e3114_thumb.PNG

transform:变形
CSS3中主要包括
旋转：rotate() 顺时针旋转给定的角度，允许负值 rotate(30deg)
扭曲：skew() 元素翻转给定的角度,根据给定的水平线（X 轴）和垂直线（Y 轴）参数：skew(30deg,20deg)
缩放：scale() 放大或缩小，根据给定的宽度（X 轴）和高度（Y 轴）参数： scale(2,4)
移动：translate() 平移，传进 x,y值，代表沿x轴和y轴平移的距离

     所有的2D转换方法组合在一起： matrix()  旋转、缩放、移动以及倾斜元素
               matrix(scale.x ,, , scale.y , translate.x, translate.y)      

改变起点位置 transform-origin: bottom left;

综合起来使用：transform: 30deg 1.5 30deg 20deg 100px 200px;
CSS transform 属性允许你修改CSS视觉格式模型的坐标空间。使用它，元素可以被转换（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）。

CSS transform 属性 , 只对 block 级元素生效！

代码例子：
transform:rotate() 旋转
http://js.jirengu.com/wacukahezo/4/edit
transform:scale() 缩放
http://js.jirengu.com/wacukahezo/5/edit
transform:translate() 转换/平移
http://js.jirengu.com/wacukahezo/8/edit
transform:skew() 斜交/ 歪
http://js.jirengu.com/roheqajave/1/edit
综合 transform:rotate() scale() translate() skew();
http://js.jirengu.com/roheqajave/5/edit
transform:matrix 矩阵
http://js.jirengu.com/yapawecivu/2/edit

clipboard.png

可以参考一下 张鑫旭 《理解CSS3 transform中的Matrix(矩阵)》
http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/