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

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

相关推荐
工业3D_大熊7 小时前
HOOPS Web Platform:3D模型轻量化与可视化的高效解决方案
3d·3d web轻量化·3d建模·3d模型轻量化·3d数据格式转换·工业3d·几何建模
mirrornan14 小时前
3D数字化技术:重塑“人货场”,开启营销新纪元
3d·3d展示·3d数字化
视觉人机器视觉1 天前
机器视觉3D工业相机机器视觉检测的优缺点
数码相机·3d·视觉检测
CodeCraft Studio2 天前
轻量级CAD编辑器CADEditorX发布15.2新版本,新增3D模型爆炸视图新工具等
计算机视觉·3d·编辑器
视觉人机器视觉2 天前
什么是平面环形无影光源
人工智能·计算机视觉·平面·3d·c#·视觉检测
视觉人机器视觉2 天前
机器视觉中的3d和2d的区别
3d
杀生丸学AI3 天前
【三维重建】FeatureGS:特征值优化的几何精度和伪影减少3DGS的重构
人工智能·3d·aigc·三维重建·扩散模型·高斯泼溅
Orange--Lin3 天前
四元数如何用于 3D 旋转(代替欧拉角和旋转矩阵)【ESP32指向鼠标】
3d·矩阵·机器人
mirrornan3 天前
3D可视化定制:开启个性化消费新时代
大数据·人工智能·3d·3d模型·3d可视化
吃个糖糖3 天前
Halcon 3D 手眼标定
3d