day-15，

2D转换

变形属性：transform

transform：代表“变换”或者“改变”得意识。

1、transform：none默认值

2、transform：translate（）；移动  平移  单位是px 

transform ：translate(200px)；平移，默认是X轴移动，可以单位是%，这个%是自己的，不是父元素的 

3、transform：rotate（）；旋转  单位是deg   deg度数 

transform ：rotate(30deg)；旋转 单位deg  默认是Z轴旋转 

4、transform：scale（）；缩放  没有单位  默认值是1 

transform ：scaleX(2)   scaleY(3) ；该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数，可以取负值。只不过取负值时，会先让元素进行翻转（顺时针180deg），然后在进行缩放 

5、transform：skew（）；倾斜   单位是deg 

transform ：skew(30deg)；倾斜 单位deg 

6、transform ：matrix()；矩阵 

transform ：matrix(n,n,n,n,n,n)； 

定义 2D 转换，使用六个值的矩阵。 

7、transform ：perspective()；景深  视距 给到元素本身上 

transform ：perspective(200px)； 

景深，用来设置用户的眼睛距离元素的距离，数值越大 表示距离越远，看到元素的变化就不明显。不能给负值 

CSS3的3D设置

CSS中transform转换属性：

一、平移

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

transform ：translate(200px)；平移，默认是X轴移动，可以单位是%，这个%是自己的，不是父元素的 

2、transform ：translateX(200px)； 根据X轴给定的参数，从当前元素位置移动。 

3、transform ：translateY(200px)； 根据Y轴给定的参数，从当前元素位置移动。 

4、transform ：translateZ(200px)； 定义 3D 转换，只是用 Z 轴的值。 

5、transform ：translate(10px,20px)； 定义2D平移移动。

6、transform：translate（10px，20px，30px）:定义3D平移移动。

7、transform ：translateX(200px)   translateY(200px)   translateZ(200px)； 

二、旋转

1、transform ：rotate(30deg)；旋转 单位deg 默认是Z轴旋转 

2、transform ：rotateX(30deg)； 根据X轴给定的参数，从当前元素位置旋转。 

3、transform ：rotateZ(30deg)； 定义 3D 转换，只是用 Z 轴的值。 

4、transform ：rotate3d(0,0,1,30deg)； 定义 3D 旋转。 

5、transform ：rotateX(30deg)   rotateY(30deg)   rotateZ(30deg)； 

三、倾斜

1、transform ：skew(30deg)；倾斜 单位deg 

2、transform ：skewX(30deg)； 通过设置 X 轴的值来定义倾斜转换 

3、transform ：skewY(30deg)； 通过设置Y 轴的值来定义倾斜转换 

4、transform ：skew(30deg,130deg)； 定义2D倾斜 

5、transform ：skewX(30deg)  skewY(130deg)  ； 

注意点：倾斜没有Z轴的写法 

转换基点

改变元素基点的位置transform-origin 

主要作用就是让我们在进行transform动作之前可以改变元素的基点位置。

A、transform-origin(X,Y):用来设置元素的运动的基点（参照点）。

默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom。

B、transform-origin(X，Y，Z)；其中的Z轴的设置，只能是数值。 

CSS中的3D相关属性

transform-style：flat | preserve-3D指定嵌套元素如何在3D空间中呈现 

A、flat：flat值为默认值，表示所有子元素在2D平面呈现  

B、preserve-3d：表示所有子元素在3D空间中呈现。

C、注意：transform-style属性需要设置在父元素中，并且高于任何嵌套的变形元素 

perspective：200px；  景深   视距 

用来设置用户和元素3D空间Z平面之间的距离。而其效应由他的值来决定，值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻；反之，值越大，用户与3D空间Z平面距离越远，视觉效果就很小。 

perspective-origin ：是3D变形中另一个重要属性，主要用来决定perspective属性的源点角度