空间转换：
- 创建3D模型
目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果
- 空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
- 空间转换也叫3D转换
- 属性：transform
2.空间位移： - 目标：使用translate实现元素空间位移效果
1.1 语法：- transform：translate3d(x,y,z);
- transform：translateX(值);
- transform：translateX(值);
- transform：translateZ(值);
1.2 取值（正负均可）
- 像素单位数值
- 百分比
案例1 空间位移
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>空间位移</title>
<style>
body {
/* 透视：添加给父级(取值800-1200) */
perspective: 800px;
/* 3D效果：添加给父级 */
transform-style: preserve-3d;
}
.box {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: skyblue;
transition: all 0.5s;
}
/*
1.Z轴的正方向为屏幕到人的眼睛的方向；
2.transform：translateZ()
3.transform：translate3D（100px,100px,300px）
*/
.box:hover {
/* 网页默认显示是2d的，看不到3d效果的 */
/* transform: translateZ(200px); */
transform: translate3d(100px,100px,300px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
案例2 透视效果
添加视距 取值范围：400~1200px (快捷：pp)
（perspective:透视）需要给谁添加：设置给使用了3d元素的最近一级的父元素
视距理解：就是当人的眼睛对屏幕的距离（取值范围之内），
数值越大表示的是视距越远，效果越不明显，数值越小，
表示的是视距越近，效果越明显(近大远小看到的是效果)
- 作用：空间转换时，为元素添加近大远小、近实远虚的视觉效果
透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>透视效果</title>
<style>
/* 透视，视距，景深 设置给使用了3d元素的最近一级的父元素（亲爸爸） */
body {
/* 添加视距 取值范围：400~1200px pp */
/* pp需要给谁添加：设置给使用了3d元素的最近一级的父元素 */
/*
视距理解：就是当人的眼睛对屏幕的距离（取值范围之内），
数值越大表示的是视距越远，效果越不明显，数值越小，
表示的是视距越近，效果越明显(近大远小看到的是效果)
*/
perspective: 1000px;
}
.box {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: skyblue;
transition: all 0.5s;
}
.box:hover {
/* 3D的元素：包含X，Y，Z轴 */
transform: translateZ(400px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
案例3（空间旋转X，Y，Z）
Z轴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>空间旋转-Z轴</title>
<style>
.box {
width: 300px;
margin: 100px auto;
}
img {
width: 300px;
transition: all 2s;
}
.box img:hover {
/* 顺时针 rotateZ == rotate */
transform: rotateZ(360deg);
/* 逆时针 */
transform: rotateZ(-360deg);
}
</style>
</head>
<body>
<div class="box">
<img src="./images/hero.jpeg" alt="" />
</div>
</body>
</html>
X轴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>空间旋转-Y轴</title>
<style>
body {
background-color: #333;
}
.box {
width: 200px;
margin: 100px auto;
/* 透视 */
perspective: 600px;
}
/* 在立方体空间中，一个点和一条线是不占位置的，是看不到的 */
img {
width: 200px;
transition: all 2s;
}
.box img:hover {
transform: rotateY(60deg);
}
</style>
</head>
<body>
<div class="box">
<img src="./images/pk1.png" alt="" />
</div>
</body>
</html>
Y轴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>空间旋转-Y轴</title>
<style>
body {
background-color: #333;
}
.box {
width: 200px;
margin: 100px auto;
/* 透视 */
perspective: 600px;
}
/* 在立方体空间中，一个点和一条线是不占位置的，是看不到的 */
img {
width: 200px;
transition: all 2s;
}
.box img:hover {
transform: rotateY(60deg);
}
</style>
</head>
<body>
<div class="box">
<img src="./images/pk1.png" alt="" />
</div>
</body>
</html>
案例4（多条对称轴旋转）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>空间旋转-X轴</title>
<style>
body {
background-color: #333;
}
.box {
width: 200px;
margin: 100px auto;
}
img {
width: 200px;
transition: all 2s;
}
.box {
perspective: 800px;
}
.box img:hover {
/* 对应的是多条旋转轴旋转 */
transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
}
</style>
</head>
<body>
<div class="box">
<img src="./images/pk1.png" alt="" />
</div>
</body>
</html>
案例5（立体呈现）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>立体呈现</title>
<style>
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
background-color: skyblue;
transition: all 2s;
/* 添加视距：仅仅是增加了一个近大远小的效果，并没有开启3D模式 */
perspective: 600px;
/* 开启3D模式 和 视距作用的对象是一样的 */
transform-style: preserve-3d;
}
.box div {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
}
.back {
background-color: green;
}
.front {
background-color: orange;
transition: 2s;
}
.box:hover .front {
transform: translateZ(300px);
}
.box:hover {
transform: rotateY(45deg);
}
</style>
</head>
<body>
<div class="box">
<div class="back">后面</div>
<div class="front">前面</div>
</div>
</body>
</html>
案例6（3D导航）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
width: 300px;
height: 40px;
margin: 50px auto;
}
li {
float: left;
height: 40px;
list-style: none;
transition: 0.5s;
/* 开启 3D */
transform-style: preserve-3d;
/* 开启上帝视角，通过旋转(ps) */
/* transform: rotateX(-20deg) rotateY(30deg); */
}
a {
display: block;
width: 100px;
height: 40px;
text-decoration: none;
color: #fff;
text-align: center;
line-height: 40px;
}
li a:first-child {
background-color: green;
/* 往Z轴正方向移动20px */
transform: translateZ(20px);
}
li a:last-child {
background-color: orange;
/* 向上平移60px,往页面里面沿着X轴正方向旋转90deg */
transform: translateY(-60px) rotateX(90deg);
}
li:hover {
/* 沿着X轴负方向旋转90deg */
transform: rotateX(-90deg);
}
</style>
</head>
<body>
<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>
</body>
</html>
空间旋转（transform）
语法
- transform: rotateZ(值);
- transform: rotateX(值);
- transform: rotateY(值);
- 目标：使用rotate实现元素空间旋转效果
判断方法
左手法则：
- 判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
- rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
立体呈现
使用transform-style: preserve-3d呈现立体图形
实现方法
- 添加 transform-style: preserve-3d;
- 使子元素处于真正的3d空间
呈现立体图形步骤
- 盒子父元素添加transform-style: preserve-3d；
- 按需求设置子盒子的位置（位移或旋转）
注意
- 空间内，转换元素都有自已独立的坐标轴，互不干扰
空间缩放
使用scale实现空间缩放效果
语法：
- transform: scaleX(倍数);
- transform: scaleY(倍数);
- transform: scaleZ(倍数);
- transform: scale3d(x, y, z);
动画 (animation)
思考：过渡（transition）可以实现什么效果？
- 答：实现2个状态间的变化过程
- 动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
使用animation添加动画效果
- 动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
- 构成动画的最小单元：帧或动画帧
动画的实现步骤
实现步骤：
- 定义动画
@keyframes change {
/* 初始状态 */
/* 如果调用该动画的盒子样式和初始状态的样式是一样的，初始状态可以省略不写 */
from {
width: 200px;
}
/* 结束的状态 */
to {
width: 600px;
}
}
2.使用动画
animation: change 2s;
动画属性
使用animation相关属性控制动画执行过程
- animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态；
注意：动画名称和动画时长必须赋值
- 取值不分先后顺序
- 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
动画属性
- 使用animation相关属性控制动画执行过程
属性 作用 取值
animation-name 动画名称
animation-duration 动画时长
animation-delay 延迟时间
animation-fill-mode 动画执行完毕时状态 forwards:最后一帧状态
backwards：第一帧状态
animation-timing-function 速度曲线 steps(数字)：逐帧动画
animation-iteration-count 重复次数 infinite无限循环
animation-direction 动画执行方向 alternate为反向
animation-play-state 暂停动画 paused暂停
通常配合：hover使用
animation复合属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>animation复合属性</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: skyblue;
/*
2.调用动画
延迟时间：动画开始之间要等待的时间 s/ms
动画播放次数：infinite 无限次播放
动画播放方向：alternate 交替播放
速度曲线：默认 ease； 1. linear 匀速播放 2. steps(次数)一般配合精灵图使用
执行完毕时的状态：forwards 动画会停在动画结束时的状态；
注意点：
动画名称和播放一次动画的时长必须写，其他属性需要就写
forwards不能和infinite结合使用，否则不生效
animation 里面属性值 不分先后顺序
当属性值里有两个时间，第一个时间永远表示动画时长，第二个表示等待时间/延迟时间
*/
/* 动画名称 动画时长 速度曲线(匀速) 延迟时间 重复次数 交替播放 动画停在结束时的状态（不能跟infinite结合使用） */
/* animation: move 2s linear 1s infinite alternate forwards; */
animation: move 4s steps(4) alternate forwards;
}
/* 1.定义动画 */
@keyframes move {
to {
width: 500px;
height: 500px;
background-color: purple;
border: 5px solid #000;
border-radius: 50%;
}
}
/* 暂停动画：配合hover使用 */
/* .box:hover {
animation-play-state: paused;
} */
/*
补间动画：动画执行过程中，没有间隔，非常的平滑
使用的速度曲线：默认值为ease； linear匀速的
逐帧动画：一步一步去执行的动画，中间会有间隔
使用的速度曲线：steps(正整数)
逐帧动画又叫精灵动画，逐帧动画常常配合精灵图去使用
*/
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
精灵图动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 140px;
height: 140px;
background: url(./images/bg.png);
animation: run 1s steps(12) infinite,move 2s linear forwards;
}
@keyframes run {
to {
/* 这里是让整个图片都参与进去的 */
background-position: -1680px 0;
}
}
@keyframes move {
to {
transform: translate(800px);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
使用steps实现逐帧动画
- 逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。
- animation-timing-function: steps(N)； 将动画过程等分成N份
动画属性
目标：使用steps实现逐帧动画
- 精灵动画制作步骤
- 准备显示区域
- 设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
- 定义动画
- 改变背景图的位置（移动的距离就是精灵图的宽度 --- 使用动画
- 添加速度曲线steps(N)，N与精灵图上小图个数相同 --- 添加无限重复效果
能够使用animation属性给一个元素添加多个动画效果
- 多个动画效果要用逗号隔开
- animation: run 1s steps(12) infinite, move 2s linear forwards;
