css：2D转换及3D转换

2D转换-transform

2D变换，是在一个平面对元素进行的操作。水平或者垂直位移、旋转或者拉伸

1、 transform：none;默认值

2、transform：translate（）；移动 平移 单位是px 默认x轴

none； 定义不进行转换。

translate(20%)；单位可以是%,%是自己的，不是父元素的

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

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

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

translateX(200px) translateY(200px) ；

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

rotate(30deg)；

rotateX(30deg)；

rotateY(30deg)；

rotateX(30deg) rotateY(30deg)；

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

scale(2)；默认x和y同时缩放

scaleX(2);通过设置 X 轴的值来定义缩放转换

scaleY(2);通过设置 Y 轴的值来定义缩放转换。

scale(2,5)；定义 2D 缩放

scaleX(2) scaleY(3) ; 可以取负值。取负值时，会先让元素进行翻转(顺时针180deg)再进行缩放

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

skew(30deg)；默认是X轴倾斜。

skew(30deg,130deg)；定义 2D 倾斜

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

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

skewX(30deg) skewY(30deg)；

6、transform：matrix（a,b,c,d,e,f）；矩阵

a 水平缩放

b 水平倾斜

c 垂直倾斜

d 垂直缩放

e 水平移动

f 垂直移动

7、transform：perspective（200px）；景深 视距 单位是px 用户的眼睛距离元素的距离，数值越大表示距离越远

转换基点

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

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

默认点是元素的中心点。

其中X和Y的值可以是百分值,em,px，

其中X也可以是字符参数值left,center,right；

Y和X一样除了百分值外还可以设置字符值top,center,bottom。

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

css的3D转换-transform

Z轴：靠近屏幕的方向是正向，远离屏幕的方向是反向

1、 transform：none;默认值 定义不进行转换。

2、transform： translate（）；移动 平移 单位是px 默认x轴

none； 定义不进行转换。

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

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

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

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

translate3d(10px,20px,30px)；定义 3D 平移移动。

translateX(200px) translateY(200px) translateZ(200px)；

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

rotate(30deg)；

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

rotateX(30deg)；

rotateY(30deg)；

rotate3d(20,0,0,30deg);定义 3D 旋转。

(从原点指向(20,0,0)这个点构成一个方向轴，然后根据左手定则，四指指向方向为旋转方向，旋转30度。)

rotateX(30deg) rotateY(30deg) rotateZ(30deg)；

错误写法：transform:rotate(30deg,30deg,30deg);

4、transform：scale（）；缩放

scale(2)；默认x和y同时缩放 默认值是1

scaleX(2);通过设置 X 轴的值来定义缩放转换

scaleY(2);通过设置 Y 轴的值来定义缩放转换。

scaleZ(2);通过设置 Z 轴的值来定义3D缩放转换。

scale(2,5)；定义 2D 缩放

scale3d(2,3,4)；定义 3D 缩放

scaleX(2) scaleY(3) scaleZ(3); 可以取负值。取负值时，会先让元素进行翻转(顺时针180deg)再进行缩放

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

skew(30deg)；默认是X轴倾斜。

skew(30deg,130deg)；定义 2D 倾斜

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

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

skewX(30deg) skewY(30deg)；

倾斜没有Z轴的写法

6、transform：matrix（a,b,c,d,e,f）；矩阵

a 水平缩放

b 水平倾斜

c 垂直倾斜

d 垂直缩放

e 水平移动

f 垂直移动

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)；定义 3D 转换，使用 16 个值的 4x4 矩阵。

7、transform ：perspective(200px) 为 3D 转换元素定义透视视图。