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

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

相关推荐
桃花键神1 天前
从传统到智能:3D 建模流程的演进与 AI 趋势 —— 以 Blender 为例
人工智能·3d·blender
东风西巷1 天前
全能的3D创作平台,Blender(免费开源3D建模工具)
学习·3d·开源·blender·软件需求
查里王1 天前
AI 3D 生成工具知识库:当前产品格局与测评总结
人工智能·3d
Hello123网站2 天前
Champ-基于3D的人物图像到动画视频生成框架
3d·ai工具
Magnum Lehar2 天前
3d wpf游戏引擎的导入文件功能c++的.h实现
3d·游戏引擎·wpf
博图光电2 天前
Motioncam Color S + 蓝激光:3D 视觉革新,重塑工业与科研应用新格局
3d
新启航光学频率梳2 天前
[新启航]深孔加工尺寸精度检测方法 - 激光频率梳 3D 轮廓测量
科技·3d·制造
eqwaak02 天前
Matplotlib 动画显示进阶:交互式控制、3D 动画与未来趋势
python·tcp/ip·3d·语言模型·matplotlib
LabVIEW开发2 天前
LabVIEW加载 STL 模型至 3D 场景 源码见附件
3d·labview·labview知识·labview功能·labview程序
嘀咕博客2 天前
Stable Virtual Camera:Stability AI等推出的AI模型 ,2D图像轻松转3D视频
人工智能·3d·音视频·ai工具