7.30知识点总结

一、transform平移

1.transform：none；定义不进行转换

2.transfrom：translate（200px）；平移，默认x轴，单位是%的话，指的是自己

3.transfrom：translateX（200px）；根据x轴参数，从当前元素位置移动

transfrom：translateY（200px）；根据y轴参数，从当前位置移动

transfrom：translateZ（200px）；根据Z轴参数，从当前位置移动

4.transfrom：translate（10px，20px）；2D平移

5.transfrom：translate（10px，20px，30px）；3D平移

6.transfrom：transfromX（200px）  translateY（200px）   translateZ（200px）；

二、transform旋转

1.transfrom：rotate（30deg）；默认Z轴旋转

2.transform：rotateX（30deg）；根据X轴给定参数，从当前元素位置旋转

3.transform：rotateY（30deg）；根据Y轴给定参数，从当前元素位置旋转

4.transform：rotateZ（30deg）；根据Z轴给定参数，从当前元素位置旋转

5.transform：rotateX（30deg）  rotateY（30deg）  rotateZ(30deg)；

三、transform缩放

transform：scale(2)；默认X和Y同时缩放，默认值是1

1.transform：scaleX（2）；通过设置X轴的值来定义缩放转换

2.transform：scaleY（3）；通过设置Y轴的值来定义缩放转换

3.transform：scaleZ（2）；通过设置Z轴的值来定义缩放转换

4.transform:scale(2,5); 定义2D缩放

5.transform：scale3d（2，3，4） 定义3D缩放

6.transform：scaleX(2)  scaleY(3)  scaleZ(3);

  该元素取负值会先让元素进行翻转（顺时针180deg），然后再进行缩放。

四、transform倾斜（倾斜没有Y轴）

1.transform：skewX（30deg）；通过X轴的值定义倾斜转换

2.transform：skewY（30deg）；通过Y轴的值来定义倾斜转换

3.transform：skew（30deg，130deg）；定义2D倾斜

4.transform：skewX（30deg）  skewY（30deg）；

五、transform：matrix（）；矩阵

1.transform：matrix（n，n，n，n，n，n）定义2D转换，使用六个值的矩阵

2.transform：matrix3d(n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n)定义3D转换，使用16个值的4*4矩阵。

六、改变元素基点transform-origin（默认点是元素的中心点）

1.transform-origin（X，Y）；设置元素运动的基点，X、Y的值可以是百分值，em，pm，其中X也可设置字符值left，center，right。Y可以设置字符值top，center，bottom。

2.transform-origin（X，Y，Z）；Z轴的设置只能是数值

七、3D相关属性

1.transform-style：flat/preserve-3d；

flat值默认在2D平面呈现，preserve-3d在3D空间中呈现（transform-style需要设置在父元素中，并且高于任何嵌套的变形元素）

2.prespective：200px；景深   视距

用来设置用户和元素3D空间Z平面之间的距离，值越小，用户与3D空间Z平面距离越近，视觉效果越好；值越大，用户与3D空间Z平面距离越远，视觉效果越小。

3.perspective-origin（源点角度）