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轴旋转45degtransform:rotate3d(1,1,0,45deg)对角线旋转45deg
登录后复制
3D旋转可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴旋转
语法：
transform:rotatex(45deg):沿x轴正方向旋转45degtransform:rotatey(45deg):沿y轴正方向旋转45degtransform:rotatez(45deg):沿z轴正方向旋转45degtransform: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轴有负值吗的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2933946.html
