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

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

相关推荐
iloveas20142 小时前
three.js+WebGL踩坑经验合集(6.2):负缩放,负定矩阵和行列式的关系(3D版本)
3d·矩阵·webgl
笑鸿的学习笔记2 天前
qt-Quick3D笔记之官方例程Runtimeloader Example运行笔记
笔记·qt·3d
你好!蒋韦杰-(烟雨平生)3 天前
第一个3D程序!
c++·数学·3d
xwz小王子5 天前
北京大学与智元机器人联合实验室发布OmniManip:显著提升机器人3D操作能力
3d·机器人
m0_743106466 天前
【论文笔记】Fast3R:前向并行muti-view重建方法
论文阅读·深度学习·计算机视觉·3d·几何学
iloveas20147 天前
three.js+WebGL踩坑经验合集(4.2):为什么不在可视范围内的3D点投影到2D的结果这么不可靠
3d·webgl
有Li7 天前
2D 超声心动图视频到 3D 心脏形状重建的临床应用| 文献速递-医学影像人工智能进展
人工智能·3d·音视频
mirrornan8 天前
3D可视化定制:开启个性化购物新时代,所见即所得
3d·3d模型·web3d
Hypochondria.8 天前
基于SMPL的三维人体重建-深度学习经典方法之VIBE
人工智能·深度学习·计算机视觉·3d
就是个名称8 天前
cesium相机
前端·3d