CSS3

1. 属性选择器
   E[att]——选择具有att属性的E元素
   E[att=“val”]——选择具有att属性，且属性值等于val的E元素
   E[att^=“val”]——匹配具有att属性，且值以val开头的E元素
   E[att$=“val”]——匹配具有att属性，且值以val结尾的E元素
   E[att*=“val”]——匹配具有att属性，且值中含有val的E元素
   不用起类名就可以选择

2. 结构伪类选择器
   E:first-child;——匹配父元素中的第一个子元素E
   E:last-child;——匹配父元素中最后一个E元素
   E:nth-child(n);——匹配父元素中的第n个子元素E
   E:first-of-type;——指定类型E的第一个
   E:last-of-type;——指定类型E的最后一个
   E:nth-of-type(n);——指定类型E的第n个
   :nth-child(n) 选择父元素中的第几个，不分类型
   :nth-of-type(n) 选择指定类型的第几个元素

3. 伪元素选择器
   :before()
   :after()
   before，after 会创建一个行内元素（没有大小），不是真的元素，在dom里面看不见。
   格式：类型::{ content=“内容”；}
   权重为1
   类选择器、属性选择器、伪类选择器的权重为10。

4. 2D转换
   转换（transform）可以实现元素的位移、旋转、缩放等效果。

4.1 移动：translate
4.1.1 语法
transform: translate(x,y);
transform: translateX(n);
transform: translateY(n);

4.1.2 注意点
定义2D转换中的移动。沿着X和Y轴移动元素；
translate最大的优点：不会影响到其他元素的位置；
translate中的“%”是相对于自身元素的translate:(50%,50%);
对行内标签没有效果。
4.2 旋转：rotate
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

4.2.1 语法
transform:rotate(度数deg)；

4.2.2 注意点
rotate里面跟度数，单位是deg，比如rotate(45deg);
角度为正时，顺时针；负时，为逆时针；
默认旋转的中心点是元素的中心点。
**transition:all 0.3s;**表示变化过程0.3s，谁做过渡给谁加。
4.2.3 转换中心点
我们可以设置元素转换的中心点。

transform-origin : x y;
x y默认转换的中心点是元素的中心点（50% 50%）；
x y可以设置 像素 或者 方位名词（top bottom left right center）
4.3 缩放：scale
4.3.1 语法
transform:scale(x,y);
里面写的数字没有单位，是倍数的意思。

4.3.2 注意点
缩放不会影响其他的元素；
可以设置缩放的中心点，transform-origin : x y;默认以中心点缩放；
5. 动画
通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相较于过渡，动画可以实现连续自动播放的效果。

5.1 动画的基本使用
制作动画分两步：

5.1. 1 定义动画；
用 keyframes 定义动画（类似定义类选择器）
@keyframes 动画名称
{
0%/from{ 原状态；}
xx%{ 过程状态（用于定义多个状态的变化，可以省略）}
100% /to{ 最终状态；}
}
百分比要是整数，表示持续时间的百分比划分。

5.1.2. 调用动画。
animation-name:动画名称；
animation-duration:持续时间；

5.2 动画的常用属性
@keyframes——规定动画；
animation——所有动画属性的简写属性，除了animation-play-state属性；
animation-name——规定@keyframes动画的名称；（必须）
animation-duration——规定动画完成一个周期所花费的秒或毫秒，默认是0；（必须）
animation-timing-function——规定动画的速度曲线，默认是“ease”;
animation-delay——规定动画合适开始，默认是0；
animation-iteration-count——规定动画播放次数，默认是1，无限循环infinite;
animation-direction——规定动画是否下一周期逆行播放，默认是“normal”,“alternate"逆播放；
animation-play-state——规定动画是否正在运行或暂停，默认是“running”，还有"paused”;
animation-fill-mode——规定动画结束后状态，保持位置forwards，回到起始backwards。
5.3 动画简写属性
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态。
简写不包括animation-play-state属性。
5.4 速度曲线细节
animation-timing-function:规定动画的速度曲线，默认是“ease”

linear——动画匀速
ease——动画以低速开始，然后加块，在结束前变慢
ease-in——动画以低速开始
ease-out——动画以低速结束
ease-in-out——动画以低速开始和结束
steps()——指定了动画分几个间隔完成
6. 3D转换
6.1 三维坐标系
x轴：水平向左为正
y轴：垂直向下为正
z轴：垂直屏幕向外为正
6.2 3D位移：translate3d(x,y,z)
transform:translateX(**px)：仅仅在X轴上移动
transform:translateY(**px)：仅仅在Y轴上移动
transform:translateZ(**px)：仅仅在Z轴上移动
transform:translate3d(x,y,z)：其中x,y,z分别指要移动的轴的方向的距离
6.3 透视:perspective
perspective:xxpx;
透视也称视距：指人的眼睛到屏幕的距离
透视写在被观察元素的父盒子上
transform:translateZ(xxpx);有了透视，就能看到元素在Z轴上的变化了
6.4 3D旋转:rotate3d(x,y,z)
transform:rotateX(xxdeg)：沿着x轴正方向旋转xx度
transform:rotateY(xxdeg)：沿着y轴正方向旋转xx度
transform:rotateZ(xxdeg)：沿着z轴正方向旋转xx度
transform:rotate3d(x,y,z,xxdeg)：沿着自定义轴旋转xxdeg，x,y,z表示旋转轴的矢量，0/1
6.5 3D呈现:transform-style
控制子元素是否开启三维立体环境
transform-style:flat 子元素不开启3d立体空间，默认
transform-style:preserve-3d 子元素开启立体空间
代码写给父级，但是影响的是子盒子
7. 浏览器私有前缀
-moz-：代表firefox浏览器私有属性
-ms-：代表ie浏览器私有属性
-webkit-：代表safari、chrome私有属性
-o-：代表Opera私有属性