在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代表三个矢量值，沿着这三个方向的合力进行移动。
参数也可以设为百分比。
---------------------