css3新属性

1，-webkit-font-smoothing：css3中用于webkit引擎中设置字体的抗锯齿、增加光滑度的属性。none用于小像素文本；subpixel-antialiased浏览器默认反锯齿;antialiased反锯齿。

2，-webkit-gradient(直线/放射状，色1中心坐标，色1半径，色2中心坐标，色2半径，from(#000000)，to(#ffffff))，调色链接http://www.css3maker.com/css-gradient.html

3，3D效果：

perspecive透视属性，当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。当元素没有设置perspective(length)时，所有后代元素被压缩在同一个二维平面上，不存在景深的效果。

建立一个小立方体，长宽高都是200px。如果perspective < 200px ，那就相当于站在盒子里面看的结果，如果perspective 非常大那就是站在非常远的地方看（立方体已经成了小正方形了）。

默认的透视视角中心在容器(是perspective所在的元素，不是他的后代元素)的中点，也就是perspective-origin: 50% 50%。

3D transform有三个方法：rotateX(围绕x轴旋转)  rotateY(围绕y轴旋转)   rotateZ(围绕z轴旋转)

translateZ理解透视位置

设置元素perspective为201像素，则其子元素，设置的translateZ值越小，则子元素大小越小（因为元素远去，我们眼睛看到的就会变小）；translateZ值越大，该元素也会越来越大，当translateZ值非常接近201像素，但是不超过201像素的时候（如200像素），该元素的大小就会撑满整个屏幕（如果父辈元素没有类似overflow:hidden的限制的话）。因为这个时候，子元素正好移到了你的眼睛前面，所谓“一叶蔽目，不见泰山”，就是这么回事。当translateZ值再变大，超过201像素的时候，该元素看不见了——这很好理解：我们是看不见眼睛后面的东西的！

transform-style属性也是3D效果中经常使用的，其两个参数，flat|preserve-3d. 前者flat为默认值，表示平面的；后者preserve-3d表示3D透视。

坑1：当rotateX(90deg)时，不可进行任何点击操作，降低一度即可。

坑2：部分元素丢失，实际是设置3d后层级z-index失效，css z-index lost after webkit transfrom translate3d in safari,把父级元素设置transform:translateZ(0);即可。按照上面方案 当safari分辨率大于2048还是会丢失dom 父级元素再添加transform-style:preserve-3d;内部区域会显示不全。方案2：父级元素添加overflow：hidden，代替transform-style和transforlateZ值。

坑3：scale放大缩小后文字会变模糊，Blurry text with css scale + translate3d，同样在设置scale的同时设置transform:translateZ(0)。

4，CSS3 transform属性rotateX放在最后，否则其他属性例如scale、translate3d会失效。