css3属性选择器
属性等于值
input[type=“search”]{}
以某个值开头的 属性值
div[class^=“icon”]{}
以某个值结尾的
div[class$=“icon”]{}
可以在任意位置的
div[class*=“icon”]{}
css3结构伪类选择器
css3伪元素选择器
css3 2D转换
转换(transform)是css3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果
转换(transform)可以简单理解为变形
移动：translate
旋转：rotate
缩放：scale
css3动画
css3 3D转换
三维坐标系其实就是指立体空间，立体空间是由三个轴共同组成的。
x轴：水平向右 注意：x右边是正值，左边是负值
y轴：垂直向下 注意：y下面是正值，上面是负值
z轴：垂直屏幕 注意：往外面是正值，往里面是负值
透视 perspective
如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)。
模拟人类的视觉位置，可认为安排一只眼睛去看
透视我们也称为视距：视距就是人的眼睛到屏幕的距离
距离视觉点越近的在电脑平面成像越大，越远成像越小
透视的单位是像素
透视写在被观察元素的父盒子上面的
d:就是视距，视距就是一个距离人的眼睛到屏幕的距离。
z:就是z轴，物体距离屏幕的距离，z轴越大(正值)我们看到的物体就越大。
3D呈现transform-style
控制子元素是否开启三维立体环境。
transform-style:flat子元素不开启3D立体空间 默认的
transform-style:preserve-3D ; 子元素开启立体空间
代码写给父级，但是影响的子盒子
这个属性很重要后面必用
浏览器私有前缀
浏览器的私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加
1.私有前缀
-moz-:代表firefox 浏览器私有属性
-ms-:代表ie浏览器私有属性
-webkit-:代表safari、chrome私有属性
-o-:代表Opera私有属性
2.提倡的写法
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;