css3的3D transform变换

最近做web前端的学习比较多，深觉css3的3D效果比较强大，虽然说也练习做了一些3D效果，但都是照葫芦画瓢，囫囵吞枣，真正要轻松实现想要的3D效果，是需要深入理解的，于是，不妨花点时间来整理下这方面的知识。 要学好一样东西，最重要的是感性上的认识，这样对于我们更加深入的理解那些抽象的名称什么的会很有帮助，关于什么是3D变化，大家就自己脑补一下生活中的实例吧，看看下面这张熟悉的3维图你就明白了。   要搞懂3D transform,可按如下几步一步一步来学习

• rotateX,rotateY,rotateZ

3D transform中有下面这三个方法： rotateX( angle ) rotateY( angle ) rotateZ( angle ) rotate旋转的意思，rotateX旋转X轴，rotateY旋转Y轴，rotateZ旋转Z轴。 如下图所示旋转效果：    二、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%; 

八、transform-style: preserve-3d

transform-style属性也是3D效果中经常使用的，其两个参数，flat|preserve-3d. 前者flat为默认值，表示平面的；后者preserve-3d表示3D透视。 preserve-3d符合我们真实世界的思维认识。 因此，基本上，我们想要根据现实经验实现一些3D效果的时候，transform-style: preserve-3d是少不了的。一般而言，该声明应用在3D变换的兄弟元素们的父元素上。

九、backface-visibility

在显示世界中，我们无法穿过软妹A看到其身后的软妹B或C或D；但是，在CSS3的3D世界中，默认情况下，我们是可以看到背后的元素 因此，为了切合实际，我们常常会这样设置，使后面元素不可见。