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度

（学习分享：css教程）

以上就是css3中的3维平面z轴有负值吗的详细内容

阅读全文