移动 Web 第二天

目录

空间转换

空间转换 – 平移

视距 perspective

空间 – 旋转

立体呈现 – transform-style

​编辑

 空间转换 – 缩放

动画

案例 – 走马灯效果

动画 – 逐帧动画

动画 – 多组动画

---

空间转换

空间：是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间， Z 轴位置与视线方向相同。

空间转换也叫 3D转换

属性：transform

空间转换 – 平移

属性

transform: translate3d(x, y, z);
transform: translateX();
transform: translateY();
transform: translateZ();

3个数都要写才起效果

transform: translate3d(x, y, z);

取值（ 正负 均可）

        像素单位数值

        百分比（参照 盒子自身尺寸 计算结果）

提示

        默认情况下， Z 轴平移没有效果

视距 perspective

作用： 指定了 观察者 与 Z=0 平面的 距离 ，为元素添加 透视效果

透视效果： 近大远小、近实远虚

属性： ( 添加给 父级 ，取值范围 800-1200 )， 加给爸爸，不能是爷爷

perspective : 视距 ;

空间 – 旋转

transform: rotateZ(值);

transform: rotateX(值);

transform: rotateY(值);

左手法则 – 根据 旋转方向 确定取值 正负

左手 握住旋转轴, 拇指指向正值方向 , 其他四个手指 弯曲 方向为旋转 正值 方向

拓展

        rotate3d(x, y, z, 角度度数) ：用来设置 自定义旋转轴的位置 及旋转的角度

        x，y，z 取值为0-1之间的数字

立体呈现 – transform-style

作用： 设置元素的 子 元素是位于 3D 空间 中还是 平面 中

属性名：transform-style         加给爸爸，不能是爷爷

属性值：

flat：子级处于 平面 中

preserve-3d ：子级处于 3D 空间

呈现立体图形步骤

1. 父元素 添加 transform-style: preserve-3d ；

2. 子级 定位

3. 调整子盒子的 位置（位移或旋转）

提示

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

 空间转换 – 缩放

属性

transform : scale3d (x, y, z);

transform : scaleX ();

transform : scaleY ();

transform : scaleZ ();

动画

过渡：实现 两个状态 间的变化过程

动画：实现 多个状态 间的变化过程， 动画过程可控 （重复播放、最终画面、是否暂停）

实现步骤

1. 定义动画

2. 使用动画

animation : 动画名称 动画花费时长 ;

提示：

动画名称 和 动画时长 必须赋值

动画名称 和 动画时长后面 取值 不 分先后顺序

如果有 两个时间 值， 第一个 时间表示 动画时长 ， 第二个 时间表示 延迟时间

案例 – 走马灯效果

列表 添加 动画 效果

鼠标 移入 区域，列表 动画暂停

无缝动画原理：复制 开头图片 到 结尾 位置（ 图片累加宽度 = 区域宽度 ）

 下面是开头图片，实际工作中不一定是3张

动画 – 逐帧动画

核心原理：

1. steps() 逐帧动画

2. CSS 精灵图

精灵动画制作步骤

1. 准备显示区域

盒子尺寸与 一张精灵小图尺寸 相同

2. 定义动画

移动背景图 （ 移动距离 = 精灵图宽度 ）

3. 使用动画

steps(N) ， N 与精灵小图个数相同

动画 – 多组动画

animation:
run 1s steps(12) infinite,
move 3s linear forwards
;