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 子元素开启立体空间

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

相关推荐
草莓奶忻7 小时前
Eigen 几何模块深拆:Isometry3d vs Affine3d + 变换矩阵本质详解
3d
Casia_Dominic7 小时前
【三维重建工具】NeRFStudio、3D GaussianSplatting、Colmap安装与使用指南
git·3d·github·点云
threelab7 小时前
threejs案例开发-中国3D国旗动画
3d
真的不想学习啦7 小时前
3D Surface Reconstruction with Enhanced High-Frequency Details
人工智能·3d
咔咔一顿操作18 小时前
Cesium实战:交互式多边形绘制与编辑功能完全指南(最终修复版)
前端·javascript·3d·vue
ykjhr_3d1 天前
3D 演示动画在汽车培训与教育领域中的应用
3d·汽车
三月的一天1 天前
React Three Fiber 实现 3D 模型点击高亮交互的核心技巧
3d·webgl·threejs·reactthreefiber
云空2 天前
《PyQt6-3D应用开发技术文档》
3d·pyqt
鹧鸪云光伏2 天前
光伏无人机3D建模:毫秒级精度设计
3d·无人机
杀生丸学AI2 天前
【三维生成】FlashDreamer:基于扩散模型的单目图像到3D场景
人工智能·3d·大模型·aigc·蒸馏与迁移学习·扩散模型与生成模型