HTML5－36d嗨起^_^

若是一个前端不会写css那必然会被贻笑大方，利用html5新增的一些c3属性能够作许许多多炫酷的效果.

你们先看我写的一个小demo:  http://zpf92.github.io/build/

这个demo里面运用了最重要的2个属性， 分别transform-style和perspective。

1、关于3d试图

transform-style: flat|preserve-3d;

flat(默认，二维效果) / preserve-3d(三维效果)。设置一个元素的transform-style:preserve-3d;只影响这个元素的子元素(若是孙元素也有3d效果，那么还必须给子元素设置preserve-3d)。这样全部子元素均可以相对与父元素的平面进行3d变形操做。和二维变形同样，三维变形可使用transform属性来设置。能够经过制定的函数或者经过三维矩阵来对元素变型。列举几个函数：

1. translate3d(x,y,z) 使元素在这三个纬度中移动,也能够分开写：

　　如：translateX(length),translateY(length), translateZ(length)。注意z轴的值只能为px;

2 .scale3d(number,number,number) 使元素在这三个纬度中缩放，也可分开写：

　　如：scaleX(),scaleY(),scaleY()。

3. rotate3d(x,y,z,angle) 使元素在这三个纬度中旋转,也能够分开写：

　　如：rotateX(angle),rotateY(angle),rotateZ(angle)

这里我我也写了2个小demo方便你们操做与理解 　　

http://zpf92.github.io/build/rotate.html 

http://zpf92.github.io/build/translate.html 

2、透视/景深效果

perspective: number|none;

perspective为一个元素设置三维透视的距离。仅做用于元素的后代，而不是其元素自己。当 perspective:none/0;时，至关于没有设perspective。好比你要创建一个小立方体，长宽高都是200px。若是你的perspective < 200px ，那就至关于站在盒子里面看的结果，若是perspective 很是大那就是站在很是远的地方看 （立方体已经成了小正方形了）。当元素没有设置perspective(length)时，全部后代元素被压缩在同一个二维平面上，不存在景深的效果。若是设置perspective(length)后， 将会看到三维的效果。默认的透视视角中心在容器(是perspective所在的元素，不是他的后代元素)的中点，也就是perspective- origin: 50% 50%。固然你也能够本身设置，好比：左上角-webkit-perspective-origin: 0px 0px；。

综合以上两点，咱们能够经过几个实例，来深刻了解下perspective(length); 和 transform-style:preserve-3d；

1. 当设置perspective(length);不设置transform-style:preserve-3d；当元素静止时，会有立体的效果：

　　　　　　　　　　

 

2. 当设置perspective(length);不设置transform-style:preserve-3d；当元素旋转时的效果：

　　　　　　　　　　

 

3. 当设置transform-style:preserve-3d；不设置perspective(length)；当元素静止时，不会有立体的效果

　　　　　　　　　　　　　　

 

4. 当设置transform-style:preserve-3d；不设置perspective(length)；当元素旋转时的效果：

　　　　　　　　　　

5. 只有当两个值都设置，无论是静止仍是旋转，都会看到立体的效果。此外还要注意几点

　　1. 若是父元素设置overflow：hidden；那么子元素就没法跳出父元素的平面，也就不能出现3D效果。就如同，transform-style：flat；

　　2. 子元素是定位元素，参照物会寻找上层的定位元素，若是没有定位父元素则找最近的带有transform属性的元素。