css3变形效果（2d）

css3的变形效果也叫变换。它可以将元素实现旋转、缩放和平移的功能。属性有两个：transform（指定应用的变换功能）和transform- origin（指定变换的起点）

一、transform的属性值：

none——无变换

translate()、translateX()、translateY()——在两个方向或水平方向、垂直方向平移元素。括号里填入长度值或百分数值

scale()、scaleX()、scaleY()——在两个方向或水平方向、垂直方向缩放元素。括号里填入数值，大于1放大，小于1缩小

rotate()——旋转元素，括号里填入角度，正值逆时针，负值顺时针

skew()、skewX()、 skewY()—— 在两个方向或水平方向、垂直方向上使元素倾斜一定的角度。括号里填入角度

matrix()——指定自定义变换。括号里填入4～6数值，用逗号隔开

二、transform- origin属性值

百分数值——指定元素x轴或y轴的起点

长度值——指定距离

left、center、right——指定x轴的位置

top、center、bottom——指定y轴的位置