大前端包括哪些（〖大前端 – 基础入门三大核心之CSS篇㉑〗- 3D变形 与空间移动）
文章目录
⭐️ 3D变形 - 3D旋转 ⭐️ 3D变形 - 空间移动在上一章节 ，我们学到的变形都是2D变形 ，就是在一个平面变形 。接下来我们来学习3D变形 。3D变形依然使用 transform属性 来设置 。
⭐️ 3D变形 - 3D旋转
首先 ，我们需要发挥一下想象力 ，将盒子想象成一个 ”演员“ ，需要在一个 ”舞台“上完成3D旋转 。
所以我们首先需要有一个 ”舞台“ ，再有一个 ”演员“ 。
具体方式可以用div包裹p标签 ，也可以用section包裹div标签：
必须设置 ”舞台“ ，否则3d变形将失效 。
perspective属性 用来定义透视强度 ，可以理解为 "人眼到舞台的距离" ，单位是 px 。
"演员" 的属性：
绕横轴旋转：transform：rotateX(); 绕纵轴旋转：transform：rotateY();下面看几个例子：
绕横轴旋转30度 ，人眼到舞台的距离是300px:
绕Y轴旋转；同时绕X轴和Y轴旋转：
3D旋转是CSS3新增属性里非常有趣的属性 。真的很强大 。
⭐️ 3D变形 - 空间移动
空间移动的前提条件：元素添加过3D旋转 。
元素经过3D旋转后 ，可继续添加translateX() 、translateY() 、translateZ() 、属性 ，让元素在空间进行移动 。
空间移动其实就是在3D坐标系中移动 ，但是一定要注意XY轴所在的面不是我们的网页面 ，而是元素旋转之后所在的那个面 。z轴垂直于元素自己的面 ，而不是网页面 。
一定要记住 ，空间移动要加在3D旋转之后：
下面看个例子：
为了帮助大家理解 ，我们可以做两个盒子 ，一个做一下空间移动 ，一个不做空间移动 。
注意Z轴是从里指向外的 。
利用3D旋转和空间移动可以制作很多很丰富的过渡和动画 ，在下面我们就会学习过渡和动画 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！