标签：

一、写在前面的秋裤

早在去年的去年，我就大举介绍了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；