更新说明:

1. 添加参考链接
2. 添加scale效果demo, 修正scale参数.
3. 添加Skew效果demo, 修正skew参数
4. 文章结尾添加内容.

css3的Transform(变形)操作.
参考: 《CSS3 Transform》《CSS3详解：transform》《CSS3-Web装修利器》

transform操作里边主要有几个常用的变形方式:

1. 旋转 – rotate
2. 缩放 – scale(scaleX, scaleY)
3. 扭曲 – skew
4. 移动 – translate

对四种变形方式, 分别做了4个demo. IE用户, 自觉离开…

旋转:Rotate

-[说明:] 常用参数就一个, 表示的是旋转多少度. 如-webkit-transform:rotate(10deg)表示顺时针旋转30°, 中心在元素最中心..
-[Codes:]
.demo_transform_rotate{-webkit-transform:rotate(30deg);-moz-transform:rotate(10deg);}
-[Demo:]

Transform – Rotate

缩放: Scale(ScaleX, ScaleY)

-[说明:] 参数表示缩放倍数, [0,1]为缩小. [1,>>1]为放大. 如果参数为负值. 则表示反转之后, 在放大/缩小到相应倍数.(laozhuhome的那篇文章看到的..)
-[注意:]测试过程中, 发现在chrome中, 当对有边框的元素进行缩放处理的时候(边框宽度为奇数, 如1px, 3px), 如果参数为小数(1.5, 0.5等), 边框的解析有时会出现异常, 左上边框缩放倍数为参数的向下取整, 右下边框表现正常.
-[Codes:]
.demo_transform_scale_{-webkit-transform:scale(1.5);-moz-transform:scale(1.5);}
.demo_transform_scale__{-webkit-transform:scale(0.5);-moz-transform:scale(0.5);}
.demo_transform_scaleX{-webkit-transform:scaleX(1.5);-moz-transform:scaleX(1.5);}
.demo_transform_scaleY{-webkit-transform:scaleY(0.5);-moz-transform:scaleY(0.5);}
.demo_transform_scale___{-webkit-transform:scale(-1.5);-moz-transform:scale(-1.5);}
-[Demo:]

Transform – Scale(1.5)

Scale(1.5) Border(1px)

Transform – Scale(0.5)

Transform – ScaleX(1.5)

Transform – ScaleY(0.5)

Transform – Scale(-1.5)

倾斜:skew

-[说明:] 常用参数就一个两个, 表示的是倾斜多少度, 分别对应x轴, y轴. 如-webkit-transform:skew(10deg, 5deg)表示x轴倾斜10度, y轴倾斜5度(说向右倾斜也可以.. 看的角度不同而已.. 效果见demo, 可以自己理解是如何倾斜.), 轴心依旧在元素最中心.
-[Codes:]
.demo_transform_skew{-webkit-transform:skew(10deg, 5deg);-moz-transform:skew(10deg, 5deg);}
-[Demo:]

Transform – Skew

变形:translate

-[说明:] 常用参数就一个, 表示的是倾斜多少度. 如-webkit-transform:skew(10deg)表示向左倾斜10°(说向右倾斜也可以.. 看的角度不同而已.. 效果见demo, 可以自己理解是如何倾斜.), 轴心依旧在元素最中心.
-[Codes:]
.demo_transform_skew{
-webkit-transform:translate(10px,0);
-moz-transform:translate(10px,0);
}
-[Demo:]

Normal Demobox

Transform – Translate

起点位置: origin

矩阵: Matrix

参考: 《CSS3-Web装修利器》

链式写法

对于某个元素, 如果加了多个样式, 可以采用链式的写法, 压缩代码.
例如:

1 2 3 4 5 6 7 8 9

-moz-transform: translate(10, 25); -webkit-transform: translate(10, 25); -o-transform: translate(10, 25); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); -moz-transform: scale(2, 1); -webkit-transform: scale(2, 1); -o-transform: scale(2, 1);

可以简化成:

1 2 3

-moz-transform: translate(10, 25) rotate(90deg) scale(2, 1); -webkit-transform: translate(10, 25) rotate(90deg) scale(2, 1); -o-transform: translate(10, 25) rotate(90deg) scale(2, 1);