CSS3(transforms)

transforms 主要包括了两个属性

transform 只可以转换 由盒子模型定位的元素，而根据经验也就是 具备了display:block这个属性，由盒子模型定位元素。

transform

指定作用在元素上的变形， 取值为空格分隔的一些列变形的列表，他们会像是被组合操作请求一样被分别执行。

transform-origin

指定原点的位置，默认值为元素的中心，可以被移动，很多变形需要用到这个属性。
例如：

• 旋转
• 缩放
• 倾斜

2D转换

注意，所有的转换，都是在原有占有位置的基础上再次处理样式而来，所以即使你的元素已经偏移了很远，但是你的元素依然在原有位置占据着一定的空间。

• translate()
• rotate()
• scale()
• matrix()

translate() 偏移

元素从当前位置移动，根据给懂的left(x轴坐标)和top(y坐标）的位置参数。

translate(50px,100px) 元素向右侧移动50px,向下侧移动100px

rotate() 顺时针旋转角度

元素顺时针旋转给定的角度deg，允许负值，负值的情况元素会逆时针旋转

rotate(30deg) 程序顺时针旋转30度

scale()方法 缩放元素

通过scale方法，元素的尺寸会增加或者减少，根据给定的宽度（X轴）或者高度（Y轴）

scale(2,4) 水平放大为原有2倍，高度为原来四倍。

skew() 元素翻转

skew()方法把元素翻转给定的角度，根据给定的水平线和垂直线参数
skew(-10deg,0deg) 会把元素顺时针向右倾斜翻转10°。

matrix() 矩阵结合所有的2D转换方法

matrix() 结合了2D转换方法，需要六个参数，包含了数学函数？？？？？？？

transform:matrix(0.866,0.5,-0.5,0.866,0,0);