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

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

相关推荐
二川bro1 小时前
第27节:3D数据可视化与大规模地形渲染
3d·信息可视化
周小码14 小时前
CesiumJS详解:打造专业级Web 3D地球仪与地图的JavaScript库
前端·javascript·3d
大嘴带你水论文14 小时前
震惊!仅用10张照片就能随意编辑3D人脸?韩国KAIST最新黑科技FFaceNeRF解析!
论文阅读·人工智能·python·科技·计算机视觉·3d·transformer
Coovally AI模型快速验证2 天前
3D目标跟踪重磅突破!TrackAny3D实现「类别无关」统一建模,多项SOTA达成!
人工智能·yolo·机器学习·3d·目标跟踪·无人机·cocos2d
研梦非凡2 天前
CVPR 2025|基于粗略边界框监督的3D实例分割
人工智能·计算机网络·计算机视觉·3d
逻辑羊驼2 天前
VSCode+MobaXterm+X11可视化界面本地显示
运维·服务器·ubuntu·3d
二川bro2 天前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
二川bro3 天前
第24节:3D音频与空间音效实现
3d·音视频
新启航半导体有限公司3 天前
[新启航]《超薄碳化硅衬底 TTV 测量:技术挑战与解决方案》
科技·3d·制造
咔咔一顿操作3 天前
第六章 Cesium 实现简易河流效果
microsoft·3d·cesium