CSS3 全新的 2D/3D 变换模块，浑身散发着迷人的魅力。
Transform
CSS3 的 transform 属性允许我们移动、旋转、缩放和倾斜元素。它的基本语法如下：
|
|
其中有若干函数可以供我们使用，可用 function 如下：
translate()rotate()scale()skewX()skewY()matrix()
1.1 transform-origin
变换原点是元素进行变换动作时所依据的点，例如：旋转变换就是绕着不动的变换原点进行旋转等，注意： 一般来说，旋转原点的坐标是固定不变的（参考坐标系是元素自身，即元素左上角为坐标系原点），各种变换动作进行时，变换原点是它们的依据。
变换动作默认的原点是元素的几何中心。但我们可以使用属性 transform-origin 指定变换动作的变换原点。其语法如下：
|
|
其中 x y 分别用于设置变换原点的横坐标与纵坐标，可以使用长度值或者百分比值，也可以使用下列的关键字值：
topbottomleftrightcenter
如果仅仅提供了一个参数，那么纵坐标 y 会被设置为 center。
旋转
旋转就是让一个元素围绕一个固定的点进行旋转。其语法如下：
|
|
θ 是一个表示角度的值，其值循序 CSS3 的取值与单位模块中关于角度的规范，一般来说，我们使用角度即可。
如果 θ 为正值，即是顺时针旋转，如果为负值，则代表逆时针旋转 |θ| 度。注意，旋转 θ（θ<0) 度与 (360-|θ|) 度是一样的。
文档流中的位置
元素一旦经过变换，看起来就像把 position: relative 应用到它身上。也就是说，该元素几乎就像是两个元素一样。原始的、转换前的元素会保持它在文档流中的位置，所以后续的元素都会受到它的 margin 和 padding 的影响。经过变换的元素并不影响页面的布局，但它会位于页面剩余部分之上的一个新层当中，意味着这个新的元素可以覆盖后续的元素。
移动
控制移动的函数是 translate()，该函数将元素从它的默认位置进行平移。在 2D 变换模块它包含了下列两个独立函数：
translateX()translateY()
这两个函数分别控制元素在 x轴 y轴 移动的距离，其可以简写为：
|
|
其中 x y 即分别表示在元素在 x轴 y轴 移动的距离。我们也可以简写，只使用一个值，如下：
|
|
如此一来，元素就是仅仅会在 x轴上进行平移。
需要注意的是，尽管 translate() 函数的表现颇像相对定位 position: relative; 中的 left top 属性，但是二者还是有区别的，经过变换的元素会保留它的位置，只是从显示上看起来向被移动过，被变换的是元素的图像，而不是元素本身。
倾斜
skew() 函数允许修改元素的水平轴或垂直轴的角度，使用语法如下：
|
|
就像 translate() 一样，上述语法其也可以拆分为下列两个单独的函数：
skewX(α)skewY(β)
skew() 函数使用的是角度值，也可以使用负值，而函数的简写形式可以使用一个或两个值。如果使用一个值，第二个值 skewY 会默认为 0。
如果是沿着 x轴 倾斜，那么就是元素的水平边依然保持水平，而竖直边则按照度数倾斜旋转；如果是沿着 y轴 倾斜，那么就是元素的竖直边依然保持竖直状态，但是水平边则按照度数倾斜旋转。
缩放
我们可以使用 scale() 函数，来使一个元素与原来相比变得更大或者更小。其使用语法如下：
|
|
scale() 也可以拆分为下列两个独立函数：
scaleX()scaleY()
与以往不同，scaleX scaleY 的值是 无单位的数字，默认尺寸是1。
如果我们使用简写属性，而且提供了一个值，那么另外一个值会被默认为是与第一个值相同的。
我们还可以使用负值，使用负值的效果就是垂直的翻转元素，创建原来元素的映射。
多重变换
我们可以在一个单独元素上引用多重变换，只需要在 transform 属性中用空格隔开各个变换函数即可：
|
|
矩阵变换
关于在 transform 属性中使用矩阵变换函数的 matrix() 的详细语法，看这里详解 CSS3 矩阵变换函数 matrix()