学习移动wob的第二天

空间转换

目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果
空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
空间转换也叫3D转换

属性：transform

1.png

空间位移

目标：使用translate实现元素空间位移效果

语法

transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);
取值（正负均可）
像素单位数值
百分比

透视

目标：使用perspective属性实现透视效果
思考：生活中，同一个物体，观察距离不同，视觉上有什么区别？
答：近大远小、近清楚远模糊
思考：默认情况下，为什么无法观察到Z轴位移效果？
答：Z轴是视线方向，移动效果应该是距离的远或近， 电脑屏幕是平面，默认无法观察远近效果

透视

目标：使用perspective属性实现透视效果
属性（添加给父级）
perspective: 值; Ø 取值：像素单位数值， 数值一般在800 – 1200。
作用
空间转换时，为元素添加近大远小、近实远虚的视觉效果

透视

目标：使用perspective属性实现透视效果
属性（添加给父级）
perspective: 值;

透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离

2.png

空间旋转

目标：使用rotate实现元素空间旋转效果

语法

transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值)

3.png

空间旋转

目标：使用rotate实现元素空间旋转效果

左手法则

判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
[图片上传中...(4.png-4a9b29-1648991398369-0)]

空间旋转

目标：使用rotate实现元素空间旋转效果

拓展

rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
x，y，z 取值为0-1之间的数字

立体呈现

目标： 使用transform-style: preserve-3d呈现立体图形
思考：使用perspective透视属性能否呈现立体图形？
答：不能，perspective只增加近大远小、近实远虚的视觉效果。
实现方法
添加 transform-style: preserve-3d; Ø 使子元素处于真正的3d空间

立体呈现

目标： 使用transform-style: preserve-3d呈现立体图形
呈现立体图形步骤

1. 盒子父元素添加transform-style: preserve-3d；
2. 按需求设置子盒子的位置（位移或旋转）

注意

空间内，转换元素都有自已独立的坐标轴，互不干扰

5.png

3D导航

目标：使用立体呈现技巧实现3D导航效果
思考：绿色和橙色盒子是如何摆放的？

搭建立方体

绿色盒子是立方体的前面
橙色盒子是立方体的上面

结论： 绿色和橙色部分共需要3个标签

1个父级标签

绿色和橙色共2个标签（子级）

6.png

3D导航

目标：使用立体呈现技巧实现3D导航效果

实现思路

1. 搭建立方体：绿色盒子是立方体的前面，橙色盒子是立方体的上面
2. 添加hover状态旋转切换效果

3D导航

目标：使用立体呈现技巧实现3D导航效果

实现思路

1. 搭建立方体
   li标签
   添加立体呈现属性transform-style: preserve-3d;
   添加旋转属性（为了便于观察效果，案例完成后删除即可）
   a标签
   调节位置

3D导航

目标：使用立体呈现技巧实现3D导航效果
实现思路

1. 搭建立方体
   调节a标签的位置
   a标签定位（子绝父相）
   英文部分添加旋转和位移样式
   中文部分添加位移样式

   
   
   7.png

3D导航

目标：使用立体呈现技巧实现3D导航效果
实现思路

2. 过渡效果
   鼠标滑过li， 添加空间旋转样式
   li添加过渡属性
   注意： 案例完成后，删除li的旋转样式。

空间缩放

目标：使用scale实现空间缩放效果

语法

transform: scaleX(倍数);
transform: scaleY(倍数);
transform: scaleZ(倍数);
transform: scale3d(x, y, z);

动画

目标：使用animation添加动画效果
思考：过渡可以实现什么效果？
答：实现2个状态间的变化过程
动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

动画

目标：使用animation添加动画效果
动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面

构成动画的最小单元：帧或动画帧

8.png

动画属性

目标：使用animation相关属性控制动画执行过程
注意：
动画名称和动画时长必须赋值
取值不分先后顺序
如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

动画属性

目标：使用animation相关属性控制动画执行过程

9.png

动画属性

目标：使用steps实现逐帧动画动画属性

10.png

动画属性

目标：使用steps实现逐帧动画
精灵动画制作步骤
准备显示区域
设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
定义动画
改变背景图的位置（移动的距离就是精灵图的宽度）
使用动画
添加速度曲线steps(N)，N与精灵图上小图个数相同

添加无限重复效果

11.png

动画属性

目标：能够使用animation属性给一个元素添加多个动画效果
多组动画
思考：如果想让小人跑远一些，该如何实现？
答：精灵动画的同时添加盒子位移动画。

12.png