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

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

相关推荐
妙为21 小时前
osg加入实时光照SilverLining 天空和3D 云
3d
哈市雪花2 天前
相机:Camera原理讲解(使用OpenGL+QT开发三维CAD)
qt·3d·交互·相机·图形学·opengl·视角
zhongqu_3dnest2 天前
3D建模公司的能力与技术
数码相机·3d·虚拟现实·vr制作公司·3d建模公司
syncon122 天前
手机屏色斑缺陷修复及相关液晶线路激光修复原理
科技·3d·制造
九班长2 天前
Golang服务端处理Unity 3D游戏地图与碰撞的详细实现
3d·unity·golang
温轻舟3 天前
3D词云图
前端·javascript·3d·交互·词云图·温轻舟
在下胡三汉3 天前
粗略地看一下 glTF 2.0 的所有标准属性(顺便说一下,还有 .glb 的结构)
3d
zhongqu_3dnest3 天前
3D可视化:开启多维洞察新时代
3d·3d建模·空间计算·3d可视化·三维空间·沉浸式体验
试着4 天前
【数据标注师】3D标注
3d·数据标注师·3d标注
工业3D_大熊13 天前
3D模式格式转换工具HOOPS Exchange如何将3D PDF转换为STEP格式?
3d·pdf·3d格式转换·3d模型格式转换·cad格式转换·cad数据格式转换·3d模型可视化