CSS3中的transform

CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

transform 在2D里主要是4个方法。除了rotate 其他都是接受x y值

• translate
• skew
• rotate
• scale

Translate：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 

transform: translate(100px, 50px);

Skew：x,y有分别的方法。 x 变化就是左右的倾斜 x 变化是 上下的倾斜

skewX(10deg) skewY(80deg);

rotate：旋转，容器整体的旋转，和skew不同，形状是没变化的，是指旋转角度

transform: rotate(30deg);

Scale：缩放，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数

transform: skew(30deg,20deg);

matrix() : matrix() 方法把所有 2D 转换方法组合在一起。matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

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

Transform Origin：上面那些效果都是 以容器的中心，对角线交点为中心进行的 倾斜 旋转 放大
也就是 transform-origin: 50% 50%