2D转换和3D转换 transform

目录

一、转换的概念

二、2D转换

2.1 translate

2.2 scale

2.3 rotate

2.4 变形原点

三、3D转换 

3.1 景深

3.2 实现3d效果

3.3 3D位移

3.4 3D旋转

---

一、转换的概念

转换就是可以让元素进行位移，旋转，缩放等效果

二、2D转换

2.1 translate

2d位移,根据X轴和Y轴位置从当前元素位置移动,例：

transform: translate(-50%,-50%);

会让元素在x轴往左边位移自身宽度的50%，并且让元素在y轴上向上位移自身宽度的50% 

2.2 scale

缩放，默认为1不进行缩放，小于一时缩小，大于一变大，无论变大缩小，元素本身所占位置宽高不发生变化，例

transform: scale(3) 

会使元素放大自身宽高的3倍 

2.3 rotate

旋转，当度数为正数时顺时针旋转，度数为负数时逆时针旋转，例

transform: rotate(90deg);

会使元素顺时针旋转90度

2.4 变形原点

transform-origin 

2d旋转默认是以元素中心，通过这个属性可以设置该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用，值例如“top left”、“right center”等等

例：

transform-origin：left bottom;

可以将变形原点设置到元素自身的左下点

三、3D转换 

3D相对于2D多了一条Z轴，靠近屏幕是正反向，远离屏幕是反方向

3.1 景深

perspective，可以实现近大远小，就像人的眼睛一样看远处小，近处大。

有2种写法：

在父元素使用：perspective: 1200px;

在元素本身使用：transform:perspective(1200px);

3.2 实现3d效果

transform-style：preserve-3d 

让元素的所有3D效果都显示，默认flat，让所有2D效果显示

3.3 3D位移

语法：transform:translate3d(x,y,z) 

也可以使用 【ransform:translateZ(t)】 对Z轴单独设置

像比2D，多了Z轴，当Z轴取值正数了，在正面位移，负数则往后面 

3.4 3D旋转

transform:rotateX()      设置元素围绕X轴旋转 

 transform:rotateY()     设置元素围绕Y轴旋转       

 transform:rotateZ()     设置元素围绕Z轴旋转

 transform:rotate3d(x,y,z,度数)   其中有3个参数4个参数，其中前3个分别代表xyz，当他们的值为1时第四个参数设置的度数生效，为0时不生效，

例

transform: rotate3d(1,0,1,90deg);

 这会让元素围绕x轴和z轴分别旋转90度，y轴没有任何动作