空间转换，动画

空间转换

目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果
l 空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
l 空间转换也叫3D转换
l 属性：transform
l 语法：
l transform: translate3d(x, y, z);
l transform: translateX(值);
l transform: translateY(值);
l transform: translateZ(值);
l 取值（正负均可）
l 像素单位数值
l 百分比

透视

目标：使用perspective属性实现透视效果
属性（添加给父级）
Ø perspective: 值;
Ø 取值：像素单位数值， 数值一般在800 – 1200。
l 作用
Ø 空间转换时，为元素添加近大远小、近实远虚的视觉效果
l 属性（添加给父级）
Ø perspective: 值;
Ø 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

空间旋转

目标：使用rotate实现元素空间旋转效果
l 语法
Ø transform: rotateZ(值);
Ø transform: rotateX(值);
Ø transform: rotateY(值);
l 左手法则
Ø 判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
拓展
Ø rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
Ø x，y，z 取值为0-1之间的数字
立体呈现
目标： 使用transform-style: preserve-3d呈现立体图形
实现方法
Ø 添加 transform-style: preserve-3d;
Ø 使子元素处于真正的3d空间
呈现立体图形步骤

1. 盒子父元素添加transform-style: preserve-3d；
2. 按需求设置子盒子的位置（位移或旋转）
   l 注意
   Ø 空间内，转换元素都有自已独立的坐标轴，互不干扰
   空间缩放
   目标：使用scale实现空间缩放效果语法
   Ø transform: scaleX(倍数);
   Ø transform: scaleY(倍数);
   Ø transform: scaleZ(倍数);
   Ø transform: scale3d(x, y, z);

动画

目标：使用animation添加动画效果
动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
l 构成动画的最小单元：帧或动画帧

定义动画：

/* 一. 定义动画：让宽度从200变大到600 /
@keyframes 动画名称{
from{
width: 200px;
}
to{
width: 600px;
}
使用动画：
/ 2.调用动画 第一个参数是你定义的动画名称,第二个参数是动画时长*/
animation: 动画名称 动画花费时长;

动画属性

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

11.png

注意：
Ø 动画名称和动画时长必须赋值
Ø 取值不分先后顺序
Ø 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

使用steps实现逐帧动画

l 逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。
l animation-timing-function: steps(N)；
Ø 将动画过程等分成N份
精灵动画制作步骤
Ø 准备显示区域
Ø 设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
Ø 定义动画
Ø 改变背景图的位置（移动的距离就是精灵图的宽度）
Ø 使用动画
Ø 添加速度曲线steps(N)，N与精灵图上小图个数相同
Ø 添加无限重复效果