transform 变形
通过 CSS3 变换, 我们能够对元素进行移动, 缩放, 转动, 拉长或拉伸. 使用 transform 属性为元素应用变换.
1,Transform: 对元素进行变形.
2,Transition: 对元素某个属性或多个属性的变化, 进行控制 (时间等), 类似 flash 的补间动画. 但只有两个关键贞. 开始, 结束.
一. CSS3 2D 转换
1,2D Transform 转换属性
2,Transform 方法
1. 移动 translate
translate(x,y) 水平方向和垂直方向同时移动 (也就是 X 轴和 Y 轴同时移动)
translateX(x) 仅水平方向移动 (X 轴移动)
translateY(Y) 仅垂直方向移动 (Y 轴移动)
2. 缩放 scale
scale(x,y) 使元素水平方向和垂直方向同时缩放 (也就是 X 轴和 Y 轴同时缩放)
scaleX(x) 元素仅水平方向缩放 (X 轴缩放)
scaleY(y) 元素仅垂直方向缩放 (Y 轴缩放)
3. 旋转 rotate
在一个给定度数顺时针旋转的元素. 负值是允许的, 这样是元素逆时针旋转.
4. 倾斜 skew
skew(x,y) 使元素在水平和垂直方向同时倾斜 (X 轴和 Y 轴同时按一定的角度值进行倾斜变形)
skewX(x) 仅使元素在水平方向倾斜变形 (X 轴倾斜变形)
skewY(y) 仅使元素在垂直方向倾斜变形 (Y 轴倾斜变形)
来源: http://www.jianshu.com/p/768a8eacec62