1. transform:变形，变换
02. 语法
transform:none|rotate|scale|skew|translate|matrix;
可以同时给transform绑定多个变换函数，之间以空格隔开。
可用于内联元素和块级元素
03. rotate(旋转)
rotate(<angle>)
参数表示旋转的度数，
整数表示顺时针，负数表示逆时针旋转
如：
transform:rotate(30deg)
04. translate(移动)
translate(x, y):x和y方向进行平移，负数向反方向平移。默认基准点为元素中心点。如果只有一个参数，第二个默认为0
translateX(x)：水平方向进行平移
translateY(y)：垂直方向进行平移
如：
transform:translate(100px, 20px)
05. scale(缩放)
scale(x,y):以基准点为中心，进行缩放，默认基准点是元素中心，如果第二个参数没有指定，则和第一个一样
scaleX(<number>)：水平方向进行缩放
scaleY(<number>):垂直方向进行缩放
如：
transform:scale(1.5, 2.0)
06. skew(扭曲)
skew(<angle>,<angle>):在x轴y轴上进行斜切变化，如果第二个参数未指定，则为0。默认以元素中心为基点进行扭曲
skewX(<angle>)
skewY(<angle>)
如：
transform:skew(10deg,20deg)
07. matrix(矩阵变换)
matrix(<number>,<number>,<number>,<number>,<number>,<number>)
用一个变换矩阵对元素进行变换
08. transform-origin:
改变元素的基准点
默认情况下transform的rotate translate scale skew matrix等操作都是以元素中心为基准点进行变换的
transform-origin:(参数1, 参数2)
参数1表示水平方向的基准
参数2表示垂直方向上的基准，如果没有参数2，表示垂直方向值不变
参数可以是em px 百分比，也可以是字符参数left center bottom top center bottom
left:0%
center:50%
right:100%
top:0%
center:50%
bottom:100%
如：
transform-origin:(left,bottom):把变换的基准点设置为左下角
CSS3_transform学习笔记
原文地址：http://www.cnblogs.com/greatfish/p/7769017.html