一、空间转换
1、空间转换
目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果
（1）空间：是从坐标轴角度定义的。x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。z轴的正值指向屏幕外面，负值指向屏幕里面。
（2）空间转换也叫3D转换
（3）属性：transform
2.1 空间位移
目标：使用translate实现元素空间位移效果
（1）语法
<1>transform: translate3d(x, y, z);
<2>transform: translateX(值);
<3>transform: translateY(值);
<4>transform: translateZ(值);
（2）取值（正负均可）
<1>像素单位数值
<2>百分比
<style>
.box {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: pink;
transition: all 0.5s;
}
.box:hover {
transform:translate3d(50px, 100px, 200px);
transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
2.2 透视
目标：使用perspective属性实现透视效果
（1）思考：生活中，同一个物体，观察距离不同，视觉上有什么区别？
答：近大远小、近清楚远模糊
（2）思考：默认情况下，为什么无法观察到Z轴位移效果？
答：Z轴是视线方向，移动效果应该是距离的远或近， 电脑屏幕是平面，默认无法观察远近效果
（3）属性（添加给父级）
a.perspective: 值px;（透视属性）
b.取值：像素单位数值， 数值一般在800 – 1200。
（4）作用
空间转换时，为元素添加近大远小、近实远虚的视觉效果
（5）透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
<style>
body {
perspective: 1000px;
}
.box {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: pink;
transition: all 0.5s;
}
.box:hover{
/* transform: translateZ(200px); */
transform: translateZ(-200px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
3、 空间旋转
目标：使用rotate实现元素空间旋转效果
（1）语法
<1>transform: rotateZ(值);( z:o)
<2>transform: rotateX(值);(x:-)
<3>transform: rotateY(值);(y:|)
（2）左手法则
判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
（3）rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度；
x，y，z 取值为0-1之间的数字
4.1 立体呈现
目标： 使用transform-style: preserve-3d呈现立体图形
（2）思考：使用perspective透视属性能否呈现立体图形？
答：不能，perspective只增加近大远小、近实远虚的视觉效果。
（3）实现方法
<1>添加 transform-style: preserve-3d;
<2>使子元素处于真正的3d空间(父级添加属性)
（4）呈现立体图形步骤
<1> 盒子父元素添加transform-style: preserve-3d；
<2>按需求设置子盒子的位置（位移或旋转）
（5）注意
空间内，转换元素都有自已独立的坐标轴，互不干扰
<title>立体呈现</title>
<style>
.cube {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: all 2s;
transform-style: preserve-3d;
}
.cube div {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
}
.front {
background-color: orange;
transform: translateZ(200px);
}
.back {
background-color: green;
}
.cube:hover{
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="cube">
<div class="front">前面</div>
<div class="back">后面</div>
</div>
</body>
4.2 3D导航
（1）思考：绿色和橙色盒子是如何摆放的？
a搭建立方体
b.绿色盒子是立方体的前面
c.橙色盒子是立方体的上面
结论： 绿色和橙色部分共需要3个标签
1个父级标签
绿色和橙色共2个标签（子级）
（2）实现思路
a.搭建立方体：绿色盒子是立方体的前面，橙色盒子是立方体的上面
b. 添加hover状态旋转切换效果
<1>搭建立方体
a.li标签
Ø 添加立体呈现属性transform-style: preserve-3d;
Ø 添加旋转属性（为了便于观察效果，案例完成后删除即可）
b.a标签
调节a标签的位置
(1)a标签定位（子绝父相）
(2)英文部分添加旋转和位移样式
(3)中文部分添加位移样式
<2>过渡效果
a.鼠标滑过li， 添加空间旋转样式
b.li添加过渡属性
注意： 案例完成后，删除li的旋转样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D导航</title>
<style>
ul {
margin: 0;
padding: 0;
list-style: none;
}
.navs {
width: 300px;
height: 40px;
margin: 50px auto;
}
.navs li {
position: relative;
float: left;
width: 100px;
height: 40px;
line-height: 40px;
transition: all .5s;
transform-style: preserve-3d;
/* 旋转：让大家在写代码的过程中看到立体盒子 */
/* transform: rotateX(-20deg) rotateY(30deg); */
}
.navs li a {
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
text-align: center;
text-decoration: none;
color: #fff;
}
.navs li a:first-child {
background-color: green;
transform: translateZ(20px);
}
.navs li a:last-child {
background-color: orange;
/* 躺平x旋转 立方体盒子的顶部，位移z轴（确保看到这个盒子） */
transform: rotateX(90deg) translateZ(20px);
}
/* li:hover 立方体旋转 */
.navs li:hover{
transform: rotateX(-90deg);
}
</style>
</head>
<body>
<div class="navs">
<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>
5、空间缩放
目标：使用scale实现空间缩放效果
（1）语法
transform: scaleX(倍数);
transform: scaleY(倍数);
transform: scaleZ(倍数);
transform: scale3d(x, y, z);
二、动画
1、目标：使用animation添加动画效果
（1）思考：过渡可以实现什么效果？
答：实现2个状态间的变化过程
（2）动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
（3）动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
（4）构成动画的最小单元：帧或动画帧
（5）实现步骤：
-
定义动画
2. 使用动画
<title>动画实现步骤</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: pink;
/* 使用动画 */
animation: change 1s;
}
/* 一. 定义动画：从200变大到600 */
/* 只能实现两个状态 */
/* @keyframes change{
from{
width: 200px;
}
to{
width: 600px;
}
} */
/* 二. 定义动画：200 到 500*300 到 800*500 */
/* 百分比指的是动画总时长的占比 */
@keyframes change{
0%{
width: 200px;
}
50%{
width: 500px;
height: 300px;
}
100%{
width: 800px;
height: 500px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
2、动画属性
目标：使用animation相关属性控制动画执行过程
注意：
a.动画名称和动画时长必须赋值
b.取值不分先后顺序
c.如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
3、目标：使用steps实现逐帧动画
（1）逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。
l animation-timing-function: steps(N)；
将动画过程等分成N份
（2）精灵动画制作步骤
<1>准备显示区域
设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
<2>定义动画
<3>改变背景图的位置（移动的距离就是精灵图的宽度）
<4>使用动画
<5>添加速度曲线steps(N)，N与精灵图上小图个数相同
<6>添加无限重复效果
4、多组动画
目标：能够使用animation属性给一个元素添加多个动画效果
（1）思考：如果想让小人跑远一些，该如何实现？
<title>精灵动画</title>
<style>
.box {
/* 1680/12 保证显示区域的尺寸和一个精灵小图的尺寸相同 */
width: 140px;
height: 140px;
/* border: 1px solid #000; */
background-image: url(./images/bg.png);
animation: move 1s steps(12) infinite,
run 5s forwards;
}
@keyframes move{
from{
background-position: 0 0;
}
to{
background-position: -1680px 0;
}
}
/* 定义一个盒子移动的动画 800px */
@keyframes run{
/* 动画的开始状态和盒子的默认样式相同的，可以省略开始状态的代码 */
/* from{
transform: translateX(0);
} */
to{
transform: translateX(800px);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
三、综合案例
略
网友评论