〖大前端 - 基础入门三大核心之CSS篇㉑〗- 3D变形 与空间移动
2023-09-14 09:05:18 时间
- 当前子专栏 基础入门三大核心篇 也是免费开放阶段。推荐他人订阅,可获取扣除平台费用后的35%收益。
- 说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费开放,购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。
- 福利:除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏的内容之外,还可以通过加入星荐官共赢计划 加入私域社区。
- 作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 跨域学习者,从事过全栈研发、产品经理等工作,目前任某金融品类App负责人。
- 荣誉:2022年度博客之星Top4、博客专家认证、全栈领域优质创作者、新星计划导师,“星荐官共赢计划” 发起人。
- 现象级专栏《白宝书系列》作者,文章知识点浅显易懂且不失深度;TFS-CLUB社区创立者,旨在以“赋能 共赢”推动共建技术人成长共同体。
- 🏆 白宝书系列
![](https://img-blog.csdnimg.cn/32df8a6bf5cb4b5eae7e7dc1f9c635ba.png#pic_center)
在上一章节,我们学到的变形都是2D变形,就是在一个平面变形。接下来我们来学习3D变形。3D变形依然使用 transform属性
来设置。
⭐️ 3D变形 - 3D旋转
首先,我们需要发挥一下想象力,将盒子想象成一个”演员“
,需要在一个”舞台“
上完成3D旋转。
所以我们首先需要有一个”舞台“,再有一个”演员“。
具体方式可以用div包裹p标签,也可以用section包裹div标签:
![](https://img-blog.csdnimg.cn/img_convert/a0575bd45c9b4c718d271c150c83e241.png#pic_center)
必须设置”舞台“,否则3d变形将失效。
perspective属性
用来定义透视强度,可以理解为 "人眼到舞台的距离"
,单位是 px
。
"演员" 的属性:
- 绕横轴旋转:
transform:rotateX();
- 绕纵轴旋转:
transform:rotateY();
下面看几个例子:
绕横轴旋转30度,人眼到舞台的距离是300px:
![](https://img-blog.csdnimg.cn/img_convert/e62cd635ca692ede6ec5e4044334b640.png#pic_center)
绕Y轴旋转;同时绕X轴和Y轴旋转:
![](https://img-blog.csdnimg.cn/img_convert/cf1f187602ec60b8411559e227b99357.png#pic_center)
3D旋转是CSS3新增属性里非常有趣的属性。真的很强大。
⭐️ 3D变形 - 空间移动
空间移动的前提条件:元素添加过3D旋转。
元素经过3D旋转后,可继续添加translateX()、translateY()、translateZ()、属性,让元素在空间进行移动。
空间移动其实就是在3D坐标系中移动,但是一定要注意XY轴所在的面不是我们的网页面,而是元素旋转之后所在的那个面。z轴垂直于元素自己的面,而不是网页面
。
![](https://img-blog.csdnimg.cn/img_convert/1b6393cfb1e73625c8af326316f94092.png#pic_center)
一定要记住,空间移动要加在3D旋转之后:
下面看个例子:
![](https://img-blog.csdnimg.cn/img_convert/8d7d3bc36f8bd523d1099538ae674a75.png#pic_center)
为了帮助大家理解,我们可以做两个盒子,一个做一下空间移动,一个不做空间移动。
![](https://img-blog.csdnimg.cn/img_convert/46bafd3e70594de11a7b5372f7e6d89c.png#pic_center)
注意Z轴是从里指向外的。
利用3D旋转和空间移动可以制作很多很丰富的过渡和动画,在下面我们就会学习过渡和动画。
相关文章
- 基于 HTML5 Canvas 的 3D 碰撞检测
- PythonOCC 3D图形库学习—导入STEP模型
- [Aaronyang] 写给自己的WPF4.5 笔记20 [3d课 1/4]
- [翻译] JFDepthView 给view提供3D景深
- [ReactVR] Animate Text, Images, Views, and 3D Elements Using the Animated Library in React VR
- [ReactVR] Add Shapes Using 3D Primitives in React VR
- 《安富莱嵌入式周报》第298期:迷你火星探测器,开源单片机3D实时渲染库, 开源USB工业相机,VS2022开始支持MarkDown,PC-lint 2.0发布
- qt 5.14版本如何实现欧拉相机旋转3D模型
- js之3D轮播图
- C#+OpenGL+FreeType显示3D文字(2) - 用GLSL+VBO绘制文字
- [Unity官方文档翻译]Primitive and Placeholder Objects Unity原生3D物体教程
- 附录A 8. Direct3D中的3D坐标变换
- 【三】3D匹配Matching之可变形曲面匹配Deformable Surface—get_deformable_surface_model_param()算子