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视频教程）
