好吧，CSS3 3D transform变换，不过如此！

转自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]

一、写在前面的秋裤

早在去年的去年，我就大肆介绍了2D transform相关内容。看过海贼王的都知道，带D的家伙都不是好惹的，2D我辈尚可以应付，3D的话，呵呵，估计我等早就在千里之外被其霸气震晕了~~

看看下图女帝的动作以及神情，就可以知道名字带D的家伙的厉害！

最近折腾ipad的一些东西，有一些3D效果的交互。有些事情，总以为是遥远的未来，谁知真正发生的时候说来就来，比如说一颗想结婚的心，又比方说在实际项目中折腾3D transform效果。

然而，虽然以前折腾过3D变换效果(webkit)，但都是依葫芦画瓢，囫囵吞枣，真正要轻松实现想要的3D效果，是需要深入理解的，于是，此时的自己苦逼了，泪奔ing……

木有办法，找资料，自己思考学习呗，当我看到下面这张基本图的时候，我的右侧的浓眉毛不由自主抖动了两下，呵，呵呵~~

这个长得像原子核一样的是什么东东？那像章鱼哥一样四处横生的箭头好吓人哦！后面怎么还有一个苍蝇拍？？CSS好可怕，我要回去找妈妈……

想必大部分的同行应该跟我一样，没有爱因斯坦爷爷的智商，没有上镜需要把表摘掉的爸爸。因此，那些术语连篇的CSS3 3D transform介绍的资料过于耀眼，无法直视。怎么办？

好吧，佛家有云，我不入地狱谁入地狱。这里，我就从凡人们的视角说说CSS3 3D transform的一些东西，希望说的东西比较亲民，不要吓着大家。

二、首先，情感化认识

我觉得吧，要想理解一个东西，最好先有一些感性的认识。

CSS3中的3D变换效果，本质上就是我们OOXX时候各种姿势的变换，又称各种体位的变换。

虽然都是成年人，但考虑到仍有不少窝中待守的雏鸟，如果上面的解释想不过来，就想想以下这些：1.下图的这些人在干嘛？

跳水？NO, No, No!! 记住，他们不是在跳水，是在做3D变换！！！

2.下图可爱baby在干嘛？广播体操？NO, No, No!! 记住，他不是在做操，是在做3D变换！！！

3.来到2次元，下图这个妹子在这幅姿态称为：卖萌？NO, No, No!! 记住，他不是在卖萌，是在做3D变换！！！

哈哈哈哈，是否意识到：在显示世界中，一切的动作（包括上面巨乳萌妹所引发的精虫上脑），都是属于3D transform变换。 因此，要学习与理解3D transform变换很简单，一句话，到现实世界找个东西映射一下即可。

三、认识的突破口：rotateX, rotateY, rotateZ

3D transform中有下面这三个方法：

• rotateX( angle )
• rotateY( angle )
• rotateZ( angle )

理解了这三个方法，后面更难懂的perspective就好下手了，可以说是突破口！

rotate旋转的意思，rotateX旋转X轴，rotateY旋转Y轴，rotateZ旋转Z轴……

什么X轴/Y轴/Z轴，这几个词从我嘴里一出来，别说你们，我自己都晕了~~

赶快，从现实世界找对应东西理解（参照下面人的旋转）：邹凯的体操单杠运动是rotateX；

蔡依林姐姐的钢管舞是rotateY；

旋转飞刀的特技表演是rotateZ。

还是理解不过来？好吧，假设你是男的，以你的女朋友举例，假如原本你和她面对面站着，然后你——从正面将其推到就是rotateX；

让其原地转个90度欣赏其侧面的丰满曲线就是rotateY；

把妹子抱到床上侧面躺着就是rotateZ。

于是，下面CSS世界中的简单3D效果是不是更容易理解了呢？！

//zxx: 下面为广告~~注意不要勿点~~嘻嘻~~

四、必不可少的perspective属性

perspective的中文意思是：透视，视角！

perspective属性的存在与否决定了你所看到的是2次元的还是3次元的，也就是是2D transform还是3D transform. 这不难理解，没有透视，不成3D.

我们初中学美术，或者学建筑的同学肯定接触过透视的一些东西：

不过，CSS3 3D transform中的透视的透视点与上面两张示例图是不同的：CSS3 3D transform的透视点是在浏览器的前方！

或者这么理解吧：显示器中3D效果元素的透视点在显示器的上方（不是后面），近似就是我们眼睛所在方位！

比方说，一个1680像素宽的显示器中有张美女图片，应用了3D transform，同时，该元素或该元素父辈元素设置的perspective大小为2000像素。则这张美女多呈现的3D效果就跟你本人在1.2个显示器宽度的地方(1680*1.2≈2000)看到的真实效果一致！！

五、translateZ帮你寻找透视位置

如果说rotateX/rotateY/rotateZ可以帮助理解三维坐标，则translateZ则可以帮你理解透视位置。

我们都知道近大远小的道理，对于没有rotateX以及rotateY的元素，translateZ的功能就是让元素在自己的眼前或近或远。比方说，我们设置元素perspective为201像素，如下：

perspective: 201px;

则其子元素，设置的translateZ值越小，则子元素大小越小（因为元素远去，我们眼睛看到的就会变小）；translateZ值越大，该元素也会越来越大，当translateZ值非常接近201像素，但是不超过201像素的时候（如200像素），该元素的大小就会撑满整个屏幕（如果父辈元素没有类似overflow:hidden的限制的话）。因为这个时候，子元素正好移到了你的眼睛前面，所谓“一叶蔽目，不见泰山”，就是这么回事。当translateZ值再变大，超过201像素的时候，该元素看不见了——这很好理解：我们是看不见眼睛后面的东西的！

再生动的文字描述也不如一个实例来得直观，您可以狠狠地点击这里：translateZ方法辅助理解perspective视角demo

建议Chrome浏览器下访问，可以使用range控件，演示效果更赞，如下截图：-100时候最小，200时候超级满屏（垂直方向因特殊布局限制没有显示），250的时候因为元素已经在视点之外，因此是一片空白（看不见）。