CSS3属性transform（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）

在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理。

注意：都是以中心点为原点进行移动旋转缩放倾斜的。

skew的默认原点是transform-origin是这个物件的中心点。

transform-origin:设置元素原点位置；

transform-origin:50% 50% 0；默认值

X轴方向：left | center | right | length |%

Y轴方向：top | center | bottom | length |%

Z轴方向：length

transform-origin:50% 0;代表中心点位置在水平方向50%，垂直方向为0，等价于transform-origin:center top;

一.rorate(旋转)
transform: rorateX(45deg)：沿X轴方向旋转45度

ransform: rorateY(45deg)：沿Y轴方向旋转45度

ransform: rorateZ(45deg)：沿Z轴方向旋转45度

ransform: rorate(45deg)：一个参数默认沿Z轴方向旋转45度

单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转

二.scale(缩放)

transform: scaleX(2)：水平方向变成原来的两倍

transform: scaleX(0.5)：水平方向变成原来的0.5倍

transform: scaleX(-0.5)：水平方向变成原来的0.5倍，并且移动的物体反的

transform: scaleY(2)：垂直方向变成原来的两倍

transform: scaleZ(2)：垂直屏幕方向（Z轴）变成原来的两倍

transform: scale(2)：水平垂直方向都变为原来的2倍

transform: scale(0.5,3)：水平方向变成原来的0.5倍，垂直方向变为原来的3倍。

三.skew(倾斜)
transform: skewX(30deg)：沿X轴倾斜30度

transform: skewY(30deg, 30deg)：沿Y轴倾斜30度

transform: skew(30deg, 30deg)：沿X和Y轴倾斜30度

四.translate(移动）

transform: translateX(100px):沿水平方向平移100像素；

transform: translateY(100px):沿垂直方向平移100像素；

transform: translateZ(100px):沿Z轴方向平移100像素；

transform: translate(45px, 150px)：水平方向上移动45像素，垂直反向上移动150像素的距离。

transform: translate2d(x,y,z)：x,y,z代表三个矢量值，沿着这三个方向的合力进行移动。

参数也可以设为百分比。
---------------------