知识导航：
2D转换之translate- 移动
- 旋转
- 缩放
- 动画
animation
1. 2D转换
2d转换的作用是将我们的盒子在二维平面上移动、旋转、缩放。
属性：transform
对应属性值
- translate，移动
- rote，旋转
- scale，缩放
下面逐一解释
1.1 移动
基本语法：
综合写法
transform: translate(x, y)
分开写
transform: translateX(n)
transfrom: translateY(n)
里面的x，y就是我们浏览器中的x轴y轴（前面写了太多次了）
举例如
transform: translate(10px, 0);即该盒子从原来位置向x轴的正放下走10px
要知道的：
- translate 最大的优点就是不影响其他元素的位置（相似于相对定位，但相对定位是占原来位置的）
- translate若用百分比单位，则是相对于本身的宽度和高度来进行计算的（如：transform: translateX(50%)，则是向右走本身盒子宽度的一半）
- 对行内标签没有效果
优化原来定位盒子的水平居中：
先按老步骤
- 右走50%，即
left：50% - 走过了，回退自己宽度一半。即margin-left：-宽度/2 px。优化这里，因为在这还得计算。故可使用transform: translateX(-50%)
1.2 旋转
先看效果图：
旋转之前：
旋转之后45deg：
现在我们应该大致知道它的作用了，2D旋转指的是让元素在二维平面内顺时针或者逆时针旋转
基本语法：
/* 单位是：deg */
transform: rotate(度数) 如45deg
应该知道：
- 设置的角度为正时，顺时针转，角度为负时，逆时针转
- 默认旋转的中心点是元素的中心点
它的旋转中心是可以有我们自己设置，属性transform-origin
基本语法：
transform-origin: x y;
举个例子：
为了看他旋转的参照我们，给它加上过渡效果
<style>
div {
margin: 100px auto;
width: 100px;
height: 100px;
background-color: gold;
transform-origin: 0px 100px;
transition: all 0.8s;
}
div:hover {
transform: rotate(45deg);
}
</style>
效果图：
可见它的旋转中心变成了左下角。而我们刚才设置的是transform-origin: 0px 100px;即x轴放下不动，y轴下下走100px。而盒子高度本身就是100px，故可见它的依照原点是盒子的左上角
同时它还支持方位词的写法，如上便还可以写成transform-origin: left bottom;
1.3 缩放
属性值：scale ，它是来控制元素的放大缩小
基本语法：
transform: scale(x, y)
注意：
- 这里的xy之间是用逗号隔开的
transform: scale(1, 1): 宽高都放大一倍，相当于没有放大transform: scale(2, 2): 宽和高都放大了二倍transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致transform:scale(0.5, 0.5): 缩小scale最大的优势：可以设置缩放的中心点，默认以中心点缩放，而且不影响其他盒子
1.4 当然transform也有综合写法
- 综合写法格式为
transform: translate() rotate() scale() - 顺序会影响到转换的效果(先旋转会改变坐标轴方向)
- 但我们同时有位置或者其他属性的时候，要将位移放到最前面
2. 动画
动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果
使用的基本步骤：
- 先定义动画，写好关键帧
- 在调用定义好的动画
定义动画语法示例：
@keyframes 动画名称 {
0% {
width: 100px; //开始宽100
}
100% {
width: 200px //结束时变为200
}
}
这里关键帧的作用就是说这个盒子在0%干了啥，10%干了啥，50%干了啥，100%的时候又干了啥
- 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
- 动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
- 用百分比来规定变化发生的时间，或用
from和to，等同于 0% 和 100%
使用动画示例：
div {
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间；
}
动画的常见属性：
animation-timing-function的不同属性值：
代码示例：
div {
width: 100px;
height: 100px;
background-color: aquamarine;
/* 动画调用名称 */
animation-name: move;
/* 动画花费时长 */
animation-duration: 2s;
/* 动画速度曲线 */
animation-timing-function: ease-in-out;
/* 动画等待多长时间执行 */
animation-delay: 2s;
/* 规定动画播放次数 infinite: 无限循环 */
animation-iteration-count: infinite;
/* 是否逆行播放 */
animation-direction: alternate;
/* 动画结束之后的状态 forward保持现状位置*/
animation-fill-mode: forwards;
}
div:hover {
/* 鼠标移入动画是否暂停或者播放 */
animation-play-state: paused;
}
动画属性的简写方式：
/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否下一次逆向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode
注意的是：
- 简写属性里面没有
animation-paly-state，因为像上面代码案例它通常需要鼠标等配合使用
