一, 空间转换
使用 transform 属性实现元素在空间内的 位移、旋转、缩放 等效果
Ø 空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
Ø 空间转换也叫3D转换
Ø 属性：transform
1, 空间位移
语法
Ø transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);
取值（正负均可）
Ø像素单位数值
百分比
.属性名: { /* 1.Z轴的正方向为屏幕到人眼镜的方向
2.transform: translateZ();
3.transform: translate3D(100px， 100px， 300px); */
/* 网页默认显示是2d的，看不到3d效果的 -- 需要给父盒子添加透视*/
/* transform: translateZ(300px); */
transform: translate3D(100px, 100px, 300px);
}
2, 透视
使用perspective属性实现透视效果
属性（添加给父级）
perspective: 值;
取值：像素单位数值， 数值一般在800 – 1200。
作用
空间转换时，为元素添加近大远小、近实远虚的视觉效果
透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
上帝视角:
transform: rotateX(-20deg) rotateY(30deg);
3, 空间旋转
使用rotate实现元素空间旋转效果
语法
transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);
左手法则
判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
拓展
rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
x，y，z 取值为0-1之间的数字
4, 立体呈现
使用transform-style: preserve-3d呈现立体图形
呈现立体图形步骤:
- 盒子父元素添加transform-style: preserve-3d；
- 按需求设置子盒子的位置（位移或旋转）
示意图.jpg
注意
Ø 空间内，转换元素都有自已独立的坐标轴，互不干扰
5, 缩放
使用scale实现空间缩放效果
语法
transform: scaleX(倍数);
transform: scaleY(倍数);
transform: scaleZ(倍数);
transform: scale3d(x, y, z);
二, 动画
使用 animation 添加动画效果
动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
构成动画的最小单元：帧或动画帧
使用动画注意点:
1.使用动画的名称不能重复
2.可参与过度的css属性都可以参与动画
3.动画名称不能为 running 关键词
实现步骤
1. 定义动画
@keyframes 动画名称 {
/ 初始的状态 /
from { }
/ 结束的状态 /
to { } }
@keyframes 动画名称 {
/ 初始的状态 /
0% { }
/ 阶段的状态 /
45% { }
/ 结束的状态 /
**100% { } ** }
2.使用动画
animation : 动画名称 动画花费时常 ;
width: 200px;
height: 100px;
background-color: skyblue;
/* 2.调用动画 第一个参数是你定义的动画名称,第二个参数是动画时长*/
animation: sheep 2s;
}
/* 一. 定义动画：让宽度从200变大到600 */
@keyframes sheep {
/* 初始的状态 */
/* 如果调用该动画的盒子样式和初始状态样式是一样的,初始状态可以省略不写 */
from {
width: 200px;
}
/* 结束的状态 */
to{
width: 600px;
}
}
.box2 {
width: 200px;
height: 100px;
background-color: tomato;
/* 2.调用动画 第一个参数是你定义的动画名称,第二个参数是动画时长*/
animation: guan 3s;
}
/* 二. 定义动画：200*100 到 500*300 到 800*500 */
@keyframes guan {
/* 初始的状态 */
0% { width: 200px; height: 100px; }
10% { width: 600px; height: 300px; }
75% { width: 1000px; height: 100px; }
100% { width: 800px; height: 800px; }
}
/* 1.定义动画 百分比可以实现阶段性的动画 */
/* 百分比定义,可以让动画拥有多个状态.百分比指的是动画执行中的某个节点 */
1.其次使用animation相关属性控制动画执行过程
animation : 动画名称 动画时常 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;
注意：
Ø动画名称和动画时长必须赋值
取值不分先后顺序
如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
调用动画
延迟时间：动画开始之间要等待的时间 s/ms
动画播放次数：infinite 无限次播放
动画播放方向：alternate 交替播放
速度曲线：默认 ease； 1. linear 匀速播放 2. steps(次数)一般配合精灵图使用
执行完毕时的状态：forwards 动画会停在动画结束时的状态；
注意点：
动画名称和播放一次动画的时长必须写，其他属性需要就写
forwards不能和infinite结合使用，否则不生效
animation 里面属性值 不分先后顺序
当属性值里有两个时间，第一个时间永远表示动画时长，第二个表示等待时间
暂停动画
一般配合hover使用
谁在调用动画,就给谁设置 : hover ,实现暂停
.box:hover { animation-play-state: paused; }
使用 steps 实现逐帧动画
逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果
animation-timing-function: steps(N)；
将动画过程等分成N份
能够使用 animation 属性给一个元素添加 多个动画 效果
多组动画 : 精灵动画的同时添加盒子位移动画
width: 140px;
height: 140px;
/* 插入背景图片 */
background: url(./images/bg.png);
/* 调用动画
调用多个动画: 动画与动画之间要用逗号隔开 */
animation: sheep 3s steps(12) infinite,
mive 3s forwards linear;
}
/* 1.先让人物在原地跑起来 */
/* 精灵图全部的动作都要参与动画,往左走图片的宽度 */
@keyframes sheep {
to {
background-position: -1680px 0;
}
}
/* 让盒子向右平移 */
@keyframes mive {
to {
transform: translate(700px);
}
}
小结:
补间动画: 动画执行过程中,没有间隔,非常的平滑
使用的速度曲线: 默认值伪ease ; linear 匀速的
逐帧动画: 一步一步的去执行动画,中间会有间隔
使用的速度曲线: steps (正整数)
逐帧动画又叫精灵图动画,通常配合精灵图使用
