一、空间转换
1.目标
- 使用transform属性实现元素在空间内的位移、旋转、缩放等效果
2.空间转换说明
- 空间：是从坐标轴角度定义的。x 、y 和z 三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
- 空间转换也叫3D转换
3.属性
1、空间位移
1.目标
2.语法
- transform: translate3d(x, y, z)
- transform: translateX(值)
- transform: translateY(值)
- transform: translateZ(值)
3.取值
- 像素单位数值
- 百分比 （注意：这里的百分比指的是自身的百分比）
4.注意点
- 3D移动简写的方式：transform：translate3d(x,y,z)中，xyz是不能省略的，如果没有数值就直接写0
2、透视
1.目标
2.属性（注意：属性是添加给父级）
- perspective: 值
- 取值：像素单位数值， 数值一般在400px – 1200px。
- 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
3.作用
- 空间转换时，为元素添加近大远小、近实远虚的视觉效果
4.说明
- 透视又叫做视距、景深，设置给使用了3D元素的最近一级的父元素（亲爸爸）
- perspective只是增加了近大远小的效果，并不是真正开启3d
- 在2D平面产生近大远小的视觉立体，但是只是效果二维的。
3、空间旋转
1.目标
2.语法
- transform: rotateZ(值)
- transform: rotateX(值)
- transform: rotateY(值)
- transform: rotate3d(x,y,z,45deg)
3.判断旋转方向
- 左手原则：左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向。
4.扩展
- rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
- xyz是表示旋转轴的矢量，是表示你是否希望沿着该轴旋转，最后一个值表示旋转的角度。
- x，y，z 取值为0-1之间的数字
- rotate属性不属于3D转换
4、立体呈现
1.目标
- 使用transform-style: preserve-3d呈现立体图形
2.呈现立体图形步骤
- 盒子父元素添加transform-style: preserve-3d；
- 按需求设置子盒子的位置（位移或旋转）
3.注意
- 空间内，转换元素都有自已独立的坐标轴，互不干扰
- transform-style：flat 子元素不开启3d立体空间，默认的。
4.3D导航案例
- 代码
<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>
- 效果图
5、空间缩放
1.目标
2.语法
- transform: scale(x,y)
- transform: scale(倍数)
3.注意点
- scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
- 只写一个参数时，这个参数为宽度，另一个参数高度会等比例缩放
- 参数是没有单位的，可以跟小数点，比 1 大元素放大，比 1 小元素缩小
6、倾斜
1.作用
- 使用skew方法实现文字或图像的倾斜处理，在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。
2.语法 (单位 deg)
- transform：skew（30deg，30deg）；//水平方向上倾斜30度，垂直方向上倾斜30度。
- transform：skew（30deg）；//水平方向上进行倾斜，垂直方向上不倾斜。
3.注意点
- 没有特殊要求的情况下，可以只写一个属性值。
二、动画
1.目标
2.说明
- 动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
- 动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
- 构成动画的最小单元：帧或动画帧
1、动画的实现步骤
- 定义动画
- 0% 和 from 是动画的开始，100% 和 to 是动画的完成。这样的规则就是动画序列
- 请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to” ，等同于 0% 和 100%。
- 使用动画
2、动画属性
1.动画属性、作用、取值
2.动画时间
3.目标
4.注意
- 动画名称和动画时长必须赋值
- 取值不分先后顺序
- 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
- forwards不能和infinite结合使用，否则不生效
- 动画的名称不能为running，否则动画不生效；
3、steps实现逐帧动画
1.说明
- 逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。
- animation-timing-function: steps(N)：将动画过程等分成N份
2.精灵动画制作步骤
- 准备显示区域
- 定义动画
- 使用动画
- 添加速度曲线steps(N)，N与精灵图上小图个数相同
- 添加无限重复效果
3.有多组动画
- 多个动画之间动画的名称不能重复
- 多个动画之间要用英文逗号隔开
4.精灵图案例
- 代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>精灵动画</title>
<style>
.box {
position: absolute;
left: 0;
width: 140px;
height: 140px;
background-image: url(./images/bg.png);
animation:
run 1s steps(12) infinite,
translate 3s linear forwards;
}
@keyframes run {
100% {
background-position: -1680px 0;
}
}
@keyframes translate {
100% {
left: 600px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
- 效果图
