2D 转换
2D 转换是改变标签在二维平面上的位置和形状 移动： translate 旋转： rotate 缩放： scale
translate 语法
x 就是 x 轴上水平移动 y 就是 y 轴上水平移动 transform: translate(x, y) transform: translateX(n) transfrom: translateY(n) 2D 的移动主要是指 水平、垂直方向上的移动 translate 最大的优点就是不影响其他元素的位置 translate 中的100%单位，是相对于本身的宽度和高度来进行计算的行内标签没有效果 代码演示：
/* 平移 */ /* 水平垂直移动 100px */ /* transform: translate(100px, 100px); */ /* 水平移动 100px */ /* transform: translate(100px, 0) */ /* 垂直移动 100px */ /* transform: translate(0, 100px) */ /* 水平移动 100px */ /* transform: translateX(100px); */ /* 垂直移动 100px */ transform: translateY(100px)rotate
2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转 使用步骤：
给元素添加转换属性 transform
属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度，单位是deg 设置元素旋转中心点(transform-origin)
transform-origin 基础语法 x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center 还可以给 x y 设置像素或者方位名词(top、bottom、left、right、center) scale 的作用 用来控制元素的放大与缩小
transform: scale(1, 1): 宽高都放大一倍，相当于没有放大transform: scale(2, 2): 宽和高都放大了二倍transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致transform:scale(0.5, 0.5): 缩小 2D 转换综合写法以及顺序问题同时使用多个转换，其格式为 transform: translate() rotate() scale() 动画(animation)
动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果 定义动画语法格式 @keyframes 动画名称 { 0% { width: 100px; } 100% { width: 200px } } 使用动画语法格式 div { /* 调用动画 / animation-name: 动画名称; / 持续时间 */ animation-duration: 持续时间； }
/* 动画名称 */ animation-name: move; /* 动画花费时长 */ animation-duration: 2s; /* 动画速度曲线 */ animation-timing-function: ease-in-out; /* 动画等待多长时间执行 */ animation-delay: 2s; /* 规定动画播放次数 infinite: 无限循环 */ animation-iteration-count: infinite; /* 是否逆行播放 */ animation-direction: alternate; /* 动画结束之后的状态 */ animation-fill-mode: forwards; /* 规定动画是否暂停或者播放 */ animation-play-state: paused;简写： /* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */ animation: name duration timing-function delay iteration-count direction fill-mode 速度曲线细节
animation-timing-function: 规定动画的速度曲线，默认是easelinear匀速 ease-in低速开始 ease-out低速结束 ease-in-out低速开始和结束steps指定时间间隔时长