3D 转换

1,3D的特点:

近小远大

物体后面遮挡不可见

2,3D移动 translate3d

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

transform:translateX(100px):仅仅是在x轴上移动

transform:translateY(100px):仅仅是在Y轴上移动

transform:translateZ(100px):仅仅是在Z轴上移动(注意:translateZ一般用px单位),有了透视,就能看到translateZ引起的变化了

transform:translate3d(x,y,z)

3,透视 perspective

4,3D旋转 rotate3d

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

transform:rotateX(45deg):沿着x轴正方向旋转45度

transform:rotateY(45deg):沿着y轴正方向旋转45度

transform:rotateZ(45deg):沿着z轴正方向旋转45度

transform:rotate3d(x,y,z,deg):沿着自定义轴旋转

css 复制代码
x y z是表示旋转轴的矢量
transform:rotate3d(1,1,45deg) 沿着独角线旋转45deg

5,3D呈现 transform-style(重要)

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

transform-style:flat 默认的不开启

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

代码写给父级,但是影响的是子盒子

相关推荐
奔袭的算法工程师8 小时前
论文解读--RCBEVDet++:Toward High-accuracy Radar-Camera Fusion 3D Perception Network
3d
鼓掌MVP2 天前
图生3D技术解析:从二维平面到立体世界的智能飞跃
平面·3d
Pu_Nine_92 天前
教程: 在网页中利用原生CSS实现3D旋转动画
css·3d·css3
程序猿阿伟4 天前
《3D山地场景渲染进阶:GPU驱动架构下细节与性能平衡的6大技术实践》
3d·架构
2401_863801464 天前
Cesium格式模型制作,3dtiles制作B3DM格式文件制作。数字孪生模型制作
3d
fanstering4 天前
腾讯混元P3-SAM: Native 3D Part Segmentation
笔记·学习·3d·点云
渊鱼L4 天前
CAD多面体密堆积_圆柱体试件3D V1.1版本更新
3d
Dave.B4 天前
vtkTubeFilter:让2D线条变3D管子,搞定流场可视化与3D建模线条加粗
3d·vtk
Dave.B4 天前
【VTK实战】vtkDepthImageToPointCloud:从2D深度图到3D点云,手把手教你落地3D扫描/AR场景
算法·计算机视觉·3d·ar·vtk
IT古董4 天前
【第五章:计算机视觉-计算机视觉在工业制造领域中的应用】1.工业缺陷分割-(1)工业品缺陷风格基础知识:割任务定义、数据集介绍
计算机视觉·3d·自动驾驶