CSS3的变形处理-笔记

在qq空间，点击右侧栏目的小图标，都会顺时针一个角度。

其中就是运用变形功能，css3中transform可以实现文字或图像的旋转、缩放、倾斜和移动。

旋转写法（以chrome为例）：

-webkit-transform:rotate(30deg);顺时针旋转30度

缩放：

-webkit-transform:scale(0.5);缩小50%，0.5是缩放倍率

可以指定水平和垂直方向的缩放倍率

倾斜:

-webkit-transform:skew(30deg,30deg);水平和垂直方向上倾斜为30度。

若其中只有一个缺省参数，则只有一个水平倾斜。

移动：

-webkit-transform:translate(50px,50px);水平方向上移动50px，垂直方向上移动50px。

同样，若其中只有一个缺省参数，则只有一个水平移动。

变形处理，可以以上写法，也可以-webkit-transform:translate(50px,50px) rotate(30deg) scale(0.5);

会顺序执行以上属性设置，先移动，后旋转，再缩放。顺序可以颠倒，但是顺序不一样也会导致效果不一样。

在处理变形时，可以设置以元素的中心点为基准点进行，

-webkit-transform-origin:left bottom;根据元素的左下角为基准点进行变形

两个参数分别水平方向上的位置：left,center,right,垂直方向上的位置：top,center,bottom

备注：属性都是针对2d设置，有些属性可以对3d设置（就是多了一个方向设置）。