CSS3 的选择器、盒子模型、过渡、渐变、旋转、转换
CSS3 新增选择器
CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素
属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器。
注意：类选择器、属性选择器、伪类选择器，权重为 10
结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素
nth-child（n） 选择某个父元素的一个或多个特定的子元素（重点）
总结：
伪元素选择器（重点）
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
注意:
CSS3 盒子模型
CSS3 中可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box，计算盒子大小的方式就发生了改变。
如果盒子模型我们改为了box-sizing: border-box ， 那padding和border就不会撑大盒子了（前提padding
和border不会超过width宽度）
CSS3 其他特性
CSS3滤镜filter:
filter CSS属性将模糊或颜色偏移等图形效果应用于元素
CSS3 calc 函数:
calc() 此CSS函数让你在声明CSS属性值时执行一些计算。
CSS3 过渡
过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或
JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画：是从一个状态 渐渐的过渡到另外一个状态
可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持（ie9以下版本） 但是不会影响页面布局
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
1.属性： 想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡，写一个all 就可以。
2. 花费时间： 单位是 秒（必须写单位） 比如 0.5s
3. 运动曲线： 默认是 ease （可以省略）
4.何时开始 ：单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略）
平面转换概念
目标：使用transform属性实现元素的位移、旋转、缩放等效果
使用translate实现元素位移效果
位移-绝对定位居中
目标：使用translate快速实现绝对定位的元素居中效果
原理: 位移取值为百分比数值，参照盒子自身尺寸计算移动距离
语法
transform: translate(水平移动距离, 垂直移动距离)
旋转
目标：使用rotate实现元素旋转效果
语法
transform: rotate(角度);注意：角度单位是deg
转换原点
目标：使用transform-origin属性改变转换原点
语法
默认圆点是盒子中心点
transform-origin: 原点水平位置 原点垂直位置
取值
方位名词（left、top、right、bottom、center） Ø 像素单位数值
百分比（参照盒子自身尺寸计算）
转换原点
目标：使用transform-origin属性改变转换原点
语法
默认圆点是盒子中心点
transform-origin: 原点水平位置 原点垂直位置
取值
方位名词（left、top、right、bottom、center） Ø 像素单位数值
百分比（参照盒子自身尺寸计算）
多重转换
目标：使用transform复合属性实现多形态转换
多重转换
目标：使用transform复合属性实现多形态转换
多重转换原理
旋转会改变网页元素的坐标轴向
先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
缩放
目标：使用scale改变元素的尺寸
语法
transform: scale(x轴缩放倍数, y轴缩放倍数)
技巧
一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
transform: scale(缩放倍数);
scale值大于1表示放大, scale值小于1表示缩小
渐变背景
目标：使用background-image属性实现渐变背景效果
渐变是多个颜色逐渐变化的视觉效果
一般用于设置盒子的背景
空间转换
目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果
空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
空间转换也叫3D转换
属性：transform
透视
目标：使用perspective属性实现透视效果
思考:生活中,同一个物体，观察距离不同，视觉上有什么区别？
答：近大远小、近清楚远模糊
思考：默认情况下，为什么无法观察到Z轴位移效果？
答：Z轴是视线方向，移动效果应该是距离的远或近， 电脑屏幕是平面，默认无法观察远近效果
属性（添加给父级）
perspective: 值;
取值：像素单位数值， 数值一般在800 – 1200。
作用:空间转换时，为元素添加近大远小、近实远虚的视觉效果
透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
空间旋转
目标：使用rotate实现元素空间旋转效果
语法
transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值)
左手法则
判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
