一、转换简介
1、什么是转换
改变元素在页面中的大小，位置，角度和形状的一种方式
2、转换分类
①、2D转换
使元素在x轴和y轴上发生变化效果
②、3D转换
在2D转换基础上，增加 z轴的变化效果
3、转换属性
属性：transform
取值：
①、none
默认值，不进行任何转换
②、转换函数
表示一个或者多个转换函数，如果是多个函数的话，中间以空格分开
4、转换原点
属性：transform-origin
默认情况下，原点是在整个元素的中心位置处
取值：数值/百分比/关键字
两个值：表示 x轴 和 y轴的位置
三个值：表示 x轴 ，y轴 ，z轴的位置
二、2D转换
1、2D位移
①、属性 和 函数
属性:transform
函数:
translate(x) :元素在x轴上的位移距离，取值为正，向右移动，取值为负，向左移动
translate(x,y) :
x表示x轴位移距离
y表示y轴位移距离，取值为正，向下移动，取值为负，向上移动
translateX(x) :只改变元素在x轴上的位置
translateY(y) :只改变元素在y轴上的位置
取值：
1、数值
2、百分比
2、2D缩放
①、作用
改变元素在页面中的大小
②、属性和函数
属性：transform
函数：
scale(value),如果只给一个值，那么x轴和y轴将等比缩放
scale(x,y):改变 x轴和y轴的缩放比例
scaleX(x):只改变x轴的缩放比例
scaleY(y):只改变y轴的缩放比例
取值：
默认值 为1
缩小：0~1 之间的数值
放大：大于1的数值
3、2D旋转
①、作用
改变元素在页面中的角度
②、属性 和 函数
属性：transform
函数：rotate(ndeg)
n取值为正，则顺时针旋转
n取值为负，则逆时针旋转
③、注意
1、转换时，坐标轴会一起进行转换
2、转换原点可以影响转换效果
4、2D倾斜
①、作用
改变元素在页面上的形状
②、属性 和 函数
属性：transform
函数：
skew(xdeg) : x轴倾斜指定角度
实际上时改变 y轴的倾斜角度
取值为正：逆时针
取值为负：顺时针
skewX(xdeg) : 效果同上
skewY(ydeg) : y轴倾斜指定角度
实际上是改变 x轴的倾斜角度
取值为正：顺时针
取值为负：逆时针
三、3D转换
①、3D转换
增加 z轴 转换效果
②、属性
属性：perspective
作用：模拟 人眼睛到 3D投射元素的距离
注意：该属性 需要加在 3D转换元素的父元素上
兼容性：
火狐：-moz-perspective:
Chrome，Safari:-webkit-perspective
Opera:-o-perspective
③、3D旋转
允许元素在 x轴，y轴，z轴上进行旋转操作
属性 和 函数
属性:transform
函数：
rotateX(xdeg):以x轴为中心轴进行元素的旋转
rotateY(ydeg)
rotateZ(zdeg)
rotate3D(x,y,z,ndeg)
x,y,z,如果取值为 0的话，说明该轴不参与旋转
x,y,z,如果取值为 1的话，说明该轴是参与旋转的
rotate3d(0,0,1,45deg)-- rotatez(45deg)
rotate3d(1,1,0,45deg)
四、3D位移
1、作用
改变元素在z轴上的位置
2、属性 和 函数
属性：transform
函数：
translateZ();
translate3D(x,y,z)
3、属性 : transform-style
作用：规范当前元素的子元素如何去排列3D位置
取值：
1、flat
默认值，不保留子元素的3D位置
2、preserve-3d
保留子元素3d