css3中的3维平面z轴有没有负值

本文小编为大家详细介绍“css3中的3维平面z轴有没有负值”，内容详细，步骤清晰，细节处理妥当，希望这篇“css3中的3维平面z轴有没有负值”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

css3中的3维平面z轴有负值。3维坐标系中z轴往屏幕外面是数值为正，往屏幕里面数值为负值；当translate3D属性值中z轴为负值时，元素向屏幕内位移，语法为“transform:translate3d(x,y,z)”。

本教程操作环境：windows10系统、CSS3&&HTML5版、Dell G3电脑。

css3中的3维平面z轴有负值吗

css3中的3维平面z轴有负值

三维坐标系就是指立体空间，空间是由三个轴共同构成，Z轴往屏幕外面是正值，里面是负值！

3D移动 translate3D

transform: translateX(100px) translateY(100px) translateZ(100px);简写方法transform:translate3d（x，y，z）

x，y，z是不能省略的，如果没有就写0

3D移动在2D移动的基础上，多加了一个可以移动的方向，就是z轴方向

transform：translateX（100px），仅仅在X轴移动
transform：translateY（100px），仅仅在Y轴移动
transform：translateZ（100px），仅仅在Z轴移动
transform：translate3d（x，y，z），设置，xyz的值，z要用像素单位，不带百分比

透视 perspective

在2D平面产生近大远小视觉立体，但是只是效果二维的。

1.如果想要在网页中产生3D效果需要透视（理解成3D物体投影在2D平面内）

2.模拟人类视觉位置，可以认为安排一只眼睛去看

3.透视我们也称为视距：视距就是人的眼睛到屏幕的距离

4.距离视觉点越来越近的在电脑平面成像越大，越远成像越小

5.透视的单位是像素

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

d：就是视距，视距是一个距离人的眼睛到屏幕的距离，透视越小，物体越大。

z：就是z轴，物体距屏幕的距离，z轴越大（正值）我们看到的物体就越大。

translateZ

给一个父盒子一个透视值，给不同的div不同的z值，所看到的效果是不一样的。

3D旋转rotate3d

transform:rotate3d(x,y,z,deg),沿着自定义轴旋转deg角度（了解即可）

xyz表示旋转轴的矢量，表示沿着该矢量轴旋转，最后一个表示旋转角度

transform:rotate3d(1,0,0,45deg)x轴旋转45deg
transform:rotate3d(1,1,0,45deg)对角线旋转45deg

3D旋转可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴旋转

语法：

transform:rotatex(45deg):沿x轴正方向旋转45deg
transform:rotatey(45deg):沿y轴正方向旋转45deg
transform:rotatez(45deg):沿z轴正方向旋转45deg
transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg为角度（了解即可）

对于元素旋转的方向判断，我们需要一个左手准则

左手准则：

左手的手拇指指向x轴的正方向

其余手指弯曲方向就是该元素沿着x轴旋转的方向。

X旋转：

正值是头往屏幕里面仰

负值是头往屏幕外面倒

Y轴旋转：

左手准则也可以

Z轴旋转：

和2d旋转没啥区别

3D呈现 transform-style

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

2.transform-style：flat子元素不开启3d立体空间，默认的

3.transform-style：preserve-3d，子元素开启立体空间

4.代码写给父级，但是影响的是子盒子

5.这个属性很重要，后面必用

语法:

.fa {
perspective: 500px;
position: relative;
margin: 50px auto;
transform-style: preserve-3d;
}
.son1,
.son,
.fa {
width: 200px;
height: 200px;
transition: all 2s;
}

2.CSS样式

box指定大小，切记要加3d呈现

back盒子要沿着y轴旋转180度

最后鼠标经过box在沿着y轴旋转180度

读到这里，这篇“css3中的3维平面z轴有没有负值”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。