空间转换：
注：z轴与视线方向相同 别名：3D转换 属性：transform
平移与视距：
因为电脑是二维平面，所以默认下：z轴不可见
因此需要加视距：perspective: ;
视距perspective:
作用：指定了观察者与z=0这一平面的距离，为元素添加透视效果
透视效果：近大远小，近实远虚
属性：（直接添加给父级，取值范围（800~1200））
perspective: 视距；过小变化不明显，过大变化太强烈
平移：
1.transform: translate3d(x,y,z);
2.transform: translateX();
4.transform: translateY();
5.transform: translateZ();
6.取值正负均可：1.像素单位数值 2.百分比：参照盒子自身尺寸
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
perspective: 1000px;
}
.box {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: pink;
transition: all .5s;
}
.box:hover {
/* 因为电脑是二维平面，因此默认状况下，z轴不可见 */
/* 缺一不生效 */
transform: translate3d(100px,200px,300px);
}
</style>
</head>
<body>
<div class="father">
<div class="box"></div>
</div>
</body>
</html>旋转：
transform: rotatez()：以z轴为轴旋转
transform: rotatex()：以x轴为轴旋转
transform: rotatey()：以y轴为轴旋转
左手法则：（根据旋转方向确定取值正负）左手握住旋转轴，大拇指指向正值方向，其余4指弯曲方向为旋转正值方向
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
margin: 100 auto;
/* 视距 */
perspective: 1000px;
}
img {
width: 300px;
transition: all .5s;
}
.box img:hover {
transform: rotateX(60deg);
transform: rotateY(60deg);
}
</style>
</head>
<body>
<div class="box">
<img src="../早柚.gif" alt="">
</div>
</body>
</html>立体呈现：
transform-style: ;
作用：决定元素的子元素是存在平面中还是立体空间中
属性：flat:子级存在平面中；preserve-3d：子级存于3d空间中
使用方法：
1.直接父级添加transform-style: preserve-3d;
2.子级通过定位到自己应到的位置上
3.调整盒子位置（位移或旋转）
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.cube {
width: 200px;
height: 200px;
margin: 100px auto;
/* background-color: pink; */
transition: all 1s;
transform-style: preserve-3d;
position: relative;
/* 观察Z轴的移动效果 */
/* transform: rotateY(88deg); */
}
.cube div {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
}
.front {
background-color: orange;
transform: translateZ(100px);
}
.back {
background-color: green;
transform: translateZ(-100px);
}
.cube:hover {
transform: rotateY(90deg);
}
</style>
</head>
<body>
<div class="cube">
<div class="front">前面</div>
<div class="back">后面</div>
</div>
</body>
</html>缩放：
transform: scaleX(); transform: scaleY(); transform: scaleZ();
z轴缩放要悬停下才能观察到
单位:无，等于1不变，大于1放大，小于1缩小
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
list-style: none;
margin: 0;
padding: 0;
}
.nav {
width: 300px;
margin: 20px auto;
}
.nav ul {
display: flex;
}
.nav li {
width: 100px;
height: 40px;
line-height: 40px;
transition: all .5s;
/* 转3D空间存储 */
transform-style: preserve-3d;
/* 旋转观察 */
/* transform: rotateY(30deg) rotateX(-20deg); */
/* 定位 */
position: relative;
}
.nav li a{
/* 定位 */
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
/* 文本居中 */
text-align: center;
/* 去除下划线 */
text-decoration: none;
color: #fff;
}
/* 立方体的每个面都有独立的坐标轴，互不影响 */
.nav li a:first-child {
background-color: green;
transform: translateZ(20px);
}
.nav li a:last-child {
background-color: orange;
transform: translateY(-20px) rotateX(90deg);
/* 或 */
/* 旋转会改变轴向 */
/* transform: rotateX(90deg) translateZ(20px); */
}
.nav li:hover {
/* 旋转 缩放 */
transform: rotateX(-90deg) scaleX(0.2);
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="#">首页</a>
<a href="#">Index</a>
</li>
<li>
<a href="#">登入</a>
<a href="#">Login</a>
</li>
<li>
<a href="#">注册</a>
<a href="#">Register</a>
</li>
</ul>
</div>
</body>
</html>动画：
动画属性：animation：动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态；
注：
动画名称和动画时长必须赋值
取值不分先后顺序
如果有两个时间值，第一个表示动画时长，第二个表示延长时间
开始代码和默认样式一样时，开始代码可以省略
实现步骤：1.定义动画 2.使用动画
1.定义动画：(百分比表示动画时长的百分比)
@keyframes 动画名称 { @keyframes 动画名称 {
from {当前状态的CSS} 0% {当前状态的CSS}
to {当前状态的CSS} 10% {当前状态的CSS}
} ····
100% {当前状态的CSS}
}
2.使用动画：
animation: animation：动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态；
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 30px;
height: 40px;
background-color: skyblue;
animation: change 3s;
transform-style: preserve-3d;
perspective: 800px;
/* transform: rotateY(20deg); */
}
/* 动画一 */
/* @keyframes change {
from {transform: translateX(0);}
to {transform: translateX(1000px) rotateX(360deg);}
} */
/* 动画二 */
@keyframes change {
0% {transform: translateX(0);}
50% {transform: translateX(500px) scale(1.5) rotateX(360deg);}
100% {transform: translate(500px) scale(1) rotateX(360deg);}
}
</style>
</head>
<body>
<div></div>
</body>
</html>属性详解：
动画名称：animation-name
动画时长：animation-duration
速度曲线：animation- time-function
linear：匀速
steps（3）：分3步完成（配合精灵图完成精灵动画）
ease：默认值，动画以低速开始，然后加快，在结束前变慢
ease-in：动画以低速开始
ease-out：动画以低速结束
ease-in-out：动画以低速开始，并以低速结束
补间动画：平滑运动
逐帧动画：一下一下=》steps（数字）====配合精灵图使用做成精灵动画
精灵动画：
1.准备显示区域
盒子尺寸与一张精灵小图尺寸相同
2.定义动画
移动背景图（移动距离=精灵图宽度）
3.使用动画
steps(N)，N与精灵小图个数相同
延迟时间：animation-delay
可以为正值也可以为负值。参数值为正时，表示延迟指定时间开始播放；参数为负时，表示跳过指定时间，并立即播放动画。
例如：animation: change 1s 2s;
重复次数：animation-iteration-count
例如：animation: change 1s 3;表示重复3次 infinite一直重复
播放方向：animation-direction
normal 以正常的方式播放动画
reverse 以相反的方向播放动画
alternate 播放动画时，奇数次（1、3、5 等）正常播放，偶数次（2、4、6 等）反向播放
alternate-reverse 播放动画时，奇数次（1、3、5 等）反向播放，偶数次（2、4、6 等）正常播放
结束时的状态：animation-fill-mode
forwards：动画执行完毕时停在结束状态
backwards：动画执行完毕时停在开始状态（默认值）
暂停动画：animation-play-stale: paused(暂停，配合hover使用)
动画与过渡的区别:
过渡：实现两个状态的变化过程
动画：实现多个状态的变化过程，并且过程可控（重复播放，最终画面，是否暂停）
无缝动画——走马灯：
复制开头动画到结尾位置（图片累加宽度=区域宽度）
代码：（用不了的图片可以自己去找一找）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
list-style: none;
margin: 0;
padding: 0;
}
.box {
width: 600px;
height: 112px;
margin: 100px auto;
border: 5px solid #000;
overflow: hidden;
}
ul {
display: flex;
animation: 雷神 5s linear infinite;
}
img {
display: block;
width: 200px;
}
/* 定义动画，给ul使用，鼠标悬停停止 */
@keyframes 雷神 {
from {transform: translateX(0);}
to {transform: translate(-800px);}
}
ul:hover {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="../雷电影.jpg" alt=""></li>
<li><img src="../雷电影3.0.jpg" alt=""></li>
<li><img src="https://pic2.zhimg.com/v2-45249e82081900c9ec94cd1a3ec1ab5e_r.jpg?source=12a79843" alt=""></li>
<li><img src="https://ts1.cn.mm.bing.net/th/id/R-C.6e9f91afdd894711e30aaabcf6e56ae6?rik=NaSOd50Hx9odXg&riu=http://i1.hdslb.com/bfs/archive/3cb9c5fb3fb8f07b13cff8369d4c6c0f38ed26ba.jpg&ehk=Uf74zwTJt9h+fg8FDXuTJW5wzJaz6SV2MGaUcs7LbWo=&risl=&pid=ImgRaw&r=0" alt=""></li>
<!-- 替身，填补露白 -->
<li><img src="../雷电影.jpg" alt=""></li>
<li><img src="../雷电影3.0.jpg" alt=""></li>
<li><img src="https://pic2.zhimg.com/v2-45249e82081900c9ec94cd1a3ec1ab5e_r.jpg?source=12a79843" alt=""></li>
</ul>
</div>
</body>
</html>精灵动画（动图）：
用速度steps(N)
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.d1 {
width: 140px;
height: 140px;
border: 1px solid #000;
background-image: url(../跑动精灵图.png);
animation: move 1s infinite steps(12);
}
@keyframes move {
from {background-position: 0 0;}
to {background-position: -1680px 0;}
}
.d2 {
width: 50px;
height: 50px;
border: 1px solid #000;
background-image: url(../原神七大元素图标.gif);
animation: run 7s infinite steps(7);
}
@keyframes run {
from {background-position: -50px -20px;}
to {background-position: -550px -20px;}
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
</body>
</html>多组动画（跑动的精灵图）：
代码：给一个元素用多个动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.d1 {
width: 140px;
height: 140px;
/* border: 1px solid #000; */
background-image: url(../跑动精灵图.png);
animation: run 1s infinite steps(12),move 3s forwards;
}
@keyframes run {
from {background-position: 0 0;}
to {background-position: -1680px 0;}
}
@keyframes move {
from {transform: translate(0);}
to {transform: translate(800px);}
}
</style>
</head>
<body>
<div class="d1"></div>
</body>
</html>