3D转换

3D转换

3D转换顾名思义就是在原2D转换基础上增加Z轴变化效果

一、三维坐标系

x轴：水平向右 注意：右边是正值，左边是负值

y轴: 垂直向下 注意：y下面是正值，上面是负值

z轴： 垂直屏幕 注意：往外面是正值，往里面是负值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zdP2OVN1-1611912463183)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210124114153502.png)]

transfroom:translateX(100px) translateY(100px) translateZ(100px);   //此时既有x轴也有y轴移动
translateZ //沿着z轴移动，后面单位一般px ，向外移动
transfrom:translate3d(x,y,z);	//3d移动简写；注意：x,y,z 不能省略

二、透视 perspective 实现近大远小

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dOcPfXWM-1611912463195)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210124115913831.png)]

透视也称视距：视距就是眼睛到屏幕的距离

透视写到被观察元素的父盒子上

d：视距

z:z轴，轴越大，我们 看到的物体越大

三、旋转 rotate3d

可以在三维平面内沿着x,y,z轴旋转

对于元素旋转的方向判断，我们可以使用左手准则：

​ 左手的拇指指向X轴的正方向；其余手指的弯曲方向就是该元素沿着X轴旋转的方向

transform:rotate3d(x,y,z,deg);	//沿着自定义旋转轴deg为角度旋转，xyz是表示旋转轴的矢量，是标识你是否希望沿着该轴旋转
transform:rotate3d(1,0,0,45deg); //沿着x轴旋转45度
transform:totate3d(1,1,0,45deg);	//沿着对角线旋转45deg

3d呈现 transfrom-style

控制子元素是否开启三维立体环境：

​ transform-style:flat 子元素不开启3d立体空间

​ transform-style:preserve-3d;子元素开启立体空间

​ 但是代码要写给父级，但是影响的是子盒子

四、浏览器的私有前缀

浏览器的私有前缀是为了兼容老版本的写法

-moz-;代表firefox（火狐）浏览器的私有属性

-ms-:代表ie浏览器私有属性

-webkit-: 代表safari\chrome私有属性

-o-:代表opera私有属性

提倡写法

-moz-border-radius:10px;