CSS新增

属性选择器

类选择器、属性选择器、伪类选择器权重都为10！
书写示例：

结构伪类选择器

nth-child(n)选择父元素里面的第n个孩子，它不管里面的孩子是否是同一个类型；nth-of-type(n) 会选择指定类型的（即当子元素类型相同时可以使用nth-child(n)，子元素类型相同时可以使用nth-of-type(n) ）。

伪元素选择器

注意：伪类选择器权重为10，伪元素选择器权重是1；伪元素选择器和标签选择器权重都为1。

2D转换

移动translate

最大优点：不会影响其他元素的位置！

此时的x,y伪正值！以向右为x轴正方向，以向下为y轴正方向

注意：以前所见到的 % 都是相对于父元素，而此处相对于元素本身。

子元素在父元素中居中显示

以前的做法：

现在所做改动：

旋转rotate

应用：字体图标箭头

效果：

转换中心点transform-origin

转换中心点默认为元素中心。

x y指定为方位名词时一般是指以盒子的某个角为中心点。

缩放scale

以前：直接对元素修改宽高，元素的上边固定不动，宽高会向左/右/下移动，且会影响下面的元素位置；
使用scale时：默认缩放中心点为盒子中心，缩放时向四周进行，缩放中心点可以自行设置；缩放时也不会影响其他元素。

转换复合写法

先写位移！

动画

使用方式

1.用keyframes定义动画（类似定义类选择器）

2.元素使用动画

动画序列

多个节点的设置：


百分比就是为动画时间的分隔。

常见属性

注意：持续时间一定是在何时开始之前的。
前两个属性必写！默认属性可以直接省略。

速度曲线 值之steps步长

一个元素可以设置多个动画，中间需要使用 ，隔开。

3D转换

特点

重点掌握三维坐标系中坐标轴的方向！

3D移动translate3d

z轴正方向面向人眼！
x,y,z是不能省略的，若果没有就写0。

3D转换–透视perspective

perspective的值指的是观察物体的距离。

translateZ与perspective区别

当一个元素中含有多个孩子时，前者可以分别对每个孩子设置，从而实现不同的效果；而后者只能对付元素进行设置，子元素都会呈现相同的效果。
例如：

3D旋转rotated3d

元素旋转方向判断

X轴：向屏幕外旋转是正值；
Y轴：

Z轴旋转与2D旋转方向、效果一样。

复合写法（简单了解）

3D呈现transform-style

私有浏览器前缀