CSS3中新增了2d变换和3d变换的特性，可以在不使用JS操作动画的前提下，对元素做基本的变换，包括：平移、缩放、旋转、和倾斜。此外，还提供了：2d转换基点（transform-orgin）、3d视点（perspective-origin）、视距（perspective）等属性，为变换提供更多可能性。
在学习的过程中，遇到了几个难点，在查询资料，总结整理后得出几点心得。
在正式开始之前，先让我们来看一张图：
如上图所示，一个三维空间有三个方向，在每个方向上加上一条轴线，在两端标上箭头，并为其规定正方向与负方向（实际开发中，XY轴相交的平面就是电脑屏幕，Z轴是一条穿过屏幕向外的线）；三条轴线的交点作为坐标原点，记为坐标O（0,0,0）。接下来，该三维空间中的任意一点，都能用三个数字组成的集合来表示，如：坐标（1,4,7）表示该点在X轴、Y轴、Z轴上的垂直投影点，与坐标原点O的距离分别是1、4、7。注意：该坐标系与数学中的“笛卡尔坐标系”的Y轴方向正好相反。
也许你会奇怪，“为什么我要在这里提什么坐标系，这不是数学的东西吗”，其实，CSS3的2d与3d变换与数学的关系非常大，可以说就是数学中立体几何的一种表现形式，理解上图有助于我们更加深入得理解CSS3变换。
一、旋转和倾斜的方向
对于旋转和倾斜变化，最重要的便是他们的默认变换方向。
对于旋转变换，其默认是沿着基准轴正方向（由使用的旋转方法决定，如：rotateX()的基准轴就是X轴）做顺时针变换。将上图中黑色边框包围的平面看做一个元素，以X轴作为基准轴；此时，若将元素旋转（+）30°，即是将黑色平面固定在X轴上，将Y轴正方向的一边往上掀起来（就像掀起一块木板，被掀起的木板仍然在一个平面内，而不会像翻书一样发生弯曲）。rotateY()同理。rotateZ()相当于2d变换的rotate()方法，就是将元素顺时针转动。具体的变换情况如下所示：
对于倾斜变换，X轴和Y轴方向相反。skewX()是将元素的垂直边逆时针（也就是向左）倾斜，而skewY()是将元素的水平边顺时针（也就是向下）倾斜。具体的变换情况如下所示：
二、变换基点、视点与视距
默认地，CSS3变换的基点是元素的中心点，即：进行变换（仅限旋转、倾斜和缩放）后，元素中心点的坐标不变，例如：元素初始位置与屏幕左上角重合，宽高均为100px，旋转30°后，元素中心点坐标仍然是（50,50）。
视点是另一种基点，它只用于3d变换。理解视点，可以借助于透视思想。我们应该对这局话都有印象--“两条平行直线在无穷远处相交”。三维空间中的直线原本不可能相交，在无穷远处也一样，但投射到人眼中，原本平行的直线因产生“透视”现象，会不断相互接近，直到交于一点。
不过，视点并不是线的交点，上图中的视点，其实是在平面的最外面，也就是在中间的立方体冲向屏幕外面的表面上。CSS的视点原理相同，只不过是模拟人眼在某个位置时，能够看到的该元素当时的样子，也就是能够像上图中不同位置的立方体，在人眼位于“视点”时，会呈现不同的表面让人看到，视点就是用于模拟这种三维的元素呈现方式的一个属性。
而另外一个不得不说的属性就是视距了。顾名思义，视距就是物体距离视点的距离。根据“透视”原理，物体会呈现近大远小的特点，当元素足够近而又大到足够遮挡人眼，人就不能看到其他东西了；当元素足够远，那么它将会显示的非常小，甚至看不见。perspective属性需要与translateZ()方法配合“食用”，为父元素设置perspective，同时，向子元素应用translateZ()方法，即：父元素用于模拟人眼位置，子元素就是你要看的物体。未对子元素应用translateZ()方法时，相当于translateZ(0)，元素显示它原本的大小；平移的距离越接近视距（不超过），元素就呈现地越大；反之，越小；而当平移距离超过视距后，元素就消失了，相当于物体跑到了人眼后方，自然就看不到了。perspective的工作原理是以元素设置的原本大小作为元素在视距处的大小，因此，平移(+)的距离，元素会变大；平移(-)的距离，元素就能变小，但必须是设置了视距的情况下才有效。
此外，如上面透视图中所示，不同位置的物体会呈现不同的样子。在CSS中，想要实现这样的效果，可以为父元素设置视距，然后给多个子元素应用变换，效果如下所示：
当元素恰好与视点平行时，元素会消失（因为元素没有厚度这一属性）。
下面是对仅子元素应用视距时呈现地样子：
此时，子元素各自有自己的视点，而不是共享一个视点，所以所有子元素呈现地样子都是一样的。
理解了以上的概念后，实现一些复杂的图形变换就能相对容易了。