CSS3打造3D效果——perspective transform的深度剖析

声明：此篇博文虽是自己手写，但大量资源取自 张鑫旭 的博文。想看更详细 更专业的剖析请看张鑫旭的博文。

昨天对css3的transform做了初步的分析和认识，突然看到perspective属性，调了半天没看出任何效果，于是开始百度... ...

度了半天发现perspective这玩意是做3D效果的，但为甚我做demo楞没看出perspective加上去有任何3D。拜读过 张鑫旭 的博文后才了解perspective是透视(学美术，建筑的肯定懂，不懂得我也解释的不专业，个人理解为景深)。既然perspective是透视，从理解上说就应该用在场景样式上，场景有了透视元素就能做3D特效了。

先来看看perspective的作用

CSS代码

        .box{
            border:solid 1px #000;
            box-sizing:content-box;
            margin:100px auto;
            width:1000px;
            height:300px;
            /* 重点看这里 */
            perspective:800px; 
        }
        .child{
            box-sizing:content-box;
            width:300px;
            height:300px;
            float:left;
            margin-left:5px;
            background-color:#87D30A;
            /* 重点看这里 */
            transform:rotateY(95deg);
        }

View Code