1.什么是转换
改变元素在页面中的位置，大小，角度以及形状的一种方式。
2D转换:只在x轴和y轴上发生的转换效果
3D转换:增加在z轴的转换效果
2.转换属性
1.转换属性
属性：transform
取值：
1.none 默认值，无任何转换效果
2.transform-function
表示1个或多个转换函数
如果是多个转换函数的话，中间用空格隔开
注意：多个转换函数最好写在一起不然可能会产生替换
2.转换原点
属性：transform-origin
取值：数字/百分比/关键字
2个值：表示原点在x轴和y轴上的位置
3个值：表示原点在x轴,y轴,z轴上的位置
默认的原点在 元素的中心位置处
(center center)
(50% 50%)
3.2D转换
1.位移
1.什么是位移
改变元素在页面中的位置
2.语法
属性：transform
取值：
1.translate(x)
指定元素在x轴上的位移距离
取值为正，元素向右移
取值为负，元素向左移
2.translate(x,y)
指定元素在x轴和y轴的位移距离
x:同上
y:取值为正，元素向下移
取值为负，元素向上移
3.translateX(x)
在x轴上的位移
4.translateY(y)
在y轴上的位移
2.缩放
1.什么是缩放
改变元素在页面中的尺寸
2.语法
属性：transform
取值：
1.scale(value)
value:横向或纵向的缩放比例
value:默认值为1
>1: 放大
<1: 缩小
负数：放大（水平和垂直都翻转180度）
2.scale(x,y)
x:横向的缩放比例
y:纵向的缩放比例
3.单向缩放函数
scaleX(x)
scaleY(y)
3.旋转
1.什么是旋转
改变元素在页面上的角度
2.语法
属性：transform
取值：
rotate(ndeg)
n：取值为正，顺时针旋转
n：取值为负，逆时针旋转
注意：
1.转换原点会影响最后的转换效果
2.旋转是连同坐标轴一起旋转的，会影响旋转后的位移效果
4.倾斜
1.什么是倾斜
改变元素在页面中的形状
2.语法
属性：transform
取值：
1.skewX(xdeg)
让元素向着x轴的方向产生倾斜效果，实际上改变的是y轴的倾斜角度值
x：取值为正，y轴逆时针倾斜
x：取值为负，y轴顺时针倾斜
2.skewY(ydeg)
让元素向着y轴的方向产生倾斜效果，实际上改变的x轴的倾斜角度值
y:取值为正，x轴顺时针倾斜
y:取值为负，x轴逆时针倾斜
3.skew(x)
等同于skewX(xdeg)
4.skew(x,y)
4.3D转换
1.透视距离
模拟人的眼睛到3D转换元素之间的距离（z轴）
属性：perspective（景深效果，值越小效果越强烈）
注意：该属性要加在3D转换元素的父元素上
2.3D旋转
属性：transform
取值：
1.rotateX(xdeg)
以x轴为中心轴，旋转元素的角度
取值为正，顺时针旋转
2.rotateY(ydeg)
以y轴为中心，旋转元素的角度
3.rotateZ(zdeg)
以z轴为中心，旋转元素的角度
4.rotate3D(x,y,z,ndeg)
x,y,z取值大于0的数字时，表示该轴要参与旋转，取值为0则不参与旋转
rotate3D(1,0,0,45deg)只在x轴旋转45度
roatate3d(1,1,1,0deg)（大小写都可以）