最近做web前端的学习比较多，深觉css3的3D效果比较强大，虽然说也练习做了一些3D效果，但都是照葫芦画瓢，囫囵吞枣，真正要轻松实现想要的3D效果，是需要深入理解的，于是，不妨花点时间来整理下这方面的知识。 要学好一样东西，最重要的是感性上的认识，这样对于我们更加深入的理解那些抽象的名称什么的会很有帮助，关于什么是3D变化，大家就自己脑补一下生活中的实例吧，看看下面这张熟悉的3维图你就明白了。 要搞懂3D transform,可按如下几步一步一步来学习 
二、perspective的中文意思是：；透视，视角。 Perspective的存在与否决定了你所看到的东西是2维的还是3维的，透视的概念是比较不好理解的，可以说掌握好这个属性，以后做3维的特效就比较轻松了。 我们都知道近大远小的道理，对于没有rotateX以及rotateY的元素，translateZ的功能就是让元素在自己的眼前或近或远。比方说，我们设置元素perspective为800像素， 则其子元素，设置的translateZ值越小，则子元素大小越小（因为元素远去，我们眼睛看到的就会变小）；translateZ值越大，该元素也会越来越大，当translateZ值非常接近800像素，但是不超过800像素的时候（如799像素），该元素的大小就会撑满整个屏幕（如果父辈元素没有类似overflow:hidden的限制的话）。因为这个时候，子元素正好移到了你的眼睛前面，所谓“一叶蔽目，不见泰山”，就是这么回事。当translateZ值再变大，超过800像素的时候，该元素看不见了——这很好理解：我们是看不见眼睛后面的东西的！ 好吧，图中的效果其实不难理解。上面舞台整个作为透视元素，因此，显然，我们看到的每个子元素的形体都是不一样的；而下面，每个元素都有一个自己的视点，因此，显然，因为rotateY的角度是一样的，因此，看上去的效果也就一模一样了！
- rotateX,rotateY,rotateZ
二、perspective的中文意思是：；透视，视角。 Perspective的存在与否决定了你所看到的东西是2维的还是3维的，透视的概念是比较不好理解的，可以说掌握好这个属性，以后做3维的特效就比较轻松了。 我们都知道近大远小的道理，对于没有rotateX以及rotateY的元素，translateZ的功能就是让元素在自己的眼前或近或远。比方说，我们设置元素perspective为800像素， 则其子元素，设置的translateZ值越小，则子元素大小越小（因为元素远去，我们眼睛看到的就会变小）；translateZ值越大，该元素也会越来越大，当translateZ值非常接近800像素，但是不超过800像素的时候（如799像素），该元素的大小就会撑满整个屏幕（如果父辈元素没有类似overflow:hidden的限制的话）。因为这个时候，子元素正好移到了你的眼睛前面，所谓“一叶蔽目，不见泰山”，就是这么回事。当translateZ值再变大，超过800像素的时候，该元素看不见了——这很好理解：我们是看不见眼睛后面的东西的！ 三、perspective属性的两种书写
perspective属性有两种书写形式，一种用在舞台元素上（动画元素们的共同父辈元素）；第二种就是用在当前动画元素上，与transform的其他属性写在一起。如下代码示例： .stage { perspective: 600px;} 以及： #stage .box { transform: perspective(600px) rotateY(45deg);} 您可以狠狠地点击这里去了解两种不同写法产生的不同的效果： 可见，如果舞台上有很多个元素，则两种书写形式的表现差异就会立马显示出来了！ 您可以狠狠地点击这里去看看大神怎么做的： http://www.zhangxinxu.com/study/201209/transform-perspective-same-rotate.html （该例子应用自别人的blog）
好吧，图中的效果其实不难理解。上面舞台整个作为透视元素，因此，显然，我们看到的每个子元素的形体都是不一样的；而下面，每个元素都有一个自己的视点，因此，显然，因为rotateY的角度是一样的，因此，看上去的效果也就一模一样了！ 四、perspective-origin
perspective-origin这个属性超级好理解，表示你那双色迷迷的眼睛看的位置。默认就是所看舞台或元素的中心。有时候，我们对中心的位置是不感兴趣的，希望视线放在其他一些地方。比方说： 一图胜千言，屌丝男们这个应该都懂的。 下面为立方体的实际应用透视效果图： perspective-origin: 25% 75%;