20150913HTML5心得

1、HTML5的X轴往右是正方向，Y轴往下是正方向，原点是左上角

2、background-size, background-clip, background-origin, transform-origin, -webkit-box-reflect

3、css3蒙板是用-webkit-mask这个属性，解释下蒙板：

比如一个div，它的背景是一张图片，如果给这个div设置了一个蒙板，那么蒙板的完全透明的地方，是不会显示背景图片，而是显示它父级的背景颜色，如果父级没有背景颜色，那么就显示父级的父级的背景颜色，直到body，不完全透明的地方会显示背景图片。

如果该div没有背景图片，只有背景颜色的话，也是一样的。

4、把2D变成3D
transform-style：会让一个物体内部变成3D
preserve-3d
flat
一般要给父级加，这个属性不能继承

5、对于Y轴，从上往下看，顺时针旋转是负的角度，逆时针旋转是正的角度

6、在没有设置transform-style和transform-origin的时候，元素的x和y轴都是元素的中线上，当元素旋转的时候，x和y轴还是在屏幕上，元素没有旋转的时候的位置。

7、css3滤镜：-webkit-filter

blur模糊，brightness亮度，contrast对比度，drop-shadow阴影，grayscale灰度，opacity透明度，sepia褐色，invert反色，saturate饱和度，hue-rotate色相旋转

-webkit-filter:blur(10px)

10、反面效果

11、