8.1 变换

在CSS3之前，要实现元素的平移、旋转、缩放和倾斜效果，常常需要依赖图片、Flash或Javascript才能完成。

在CSS3中，使用变换（transform），就能轻松实现这些效果，而无需加载额外的文件，在提升开发效率的同时，还能提高页面的执行效率。变换的基本原理，是通过改变坐标系统，来实现元素的平移、旋转、缩放和倾斜等效果。

把实现平移、旋转、缩放、倾斜等所使用的方法，称作变换函数，它们分别是translate、rotate、scale、skew、matrix。

CSS3中，通过 transform属性指定一系列变换函数，来实现元素的变换效果。语法格式为：

transform: none | <transform-function> [ <transform-function> ]*

默认值为none，表示不进行变换；<transform-function>表示一个或多个变换函数，以空格分开。也就是说，变换可以用于任何元素，一个元素可以同时应用多种类型的变换，包括平移（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）、及矩阵变换（matrix）。

CSS3中的变换包括2D变换和3D变换，2D变换在二维坐标系统中进行，3D变换在三维坐标系统中进行。笔者对3D变换研究不深，这里只介绍2D变换。

2D变换，就是在二维空间中，通过平移、旋转、缩放、倾斜和矩阵变换，来改变二维坐标系统中的 x 轴、 y 轴，进而实现元素的平移、旋转、缩放、倾斜效果。

平移

平移，就是在水平或垂直方向上，将元素移动指定的距离。平移有三个变换函数：

1）translate(tx, ty)：在水平方向和垂直方向同时平移（即 x 轴和 y 轴同时移动）。如果未提供 ty，则使用默认值 0。

参数 tx 表示在 x 轴方向平移的距离，大于 0 时向右移动，小于 0 时向左移动，等于0 表示不平移；参数 ty 表示在 y 轴方向平移的距离，大于 0 时向下移动，小于 0 时向上移动，等于 0 表示不平移。

如，transform: translate(100px, 20px)，表示将元素在 x 轴方向向右移动 100px，y 轴方向向下移动 20px。运行效果如图 8‑1 所示：

2）translateX(tx)：只在 x 轴（水平方向）进行平移，相当于translate(tx, 0)。

如，transform: translateX (100px)，表示将元素在 x 轴方向向右移动 100px，y 轴方向不进行移动。运行效果如图 8‑2 所示：

3）translateY(ty)：只在 y 轴（垂直方向）进行平移，相当于translate(0, ty)。

如，transform: translateY (20px)，表示将元素在 y 轴方向向下移动 20px，x 轴方向不进行移动。运行效果如图 8‑3 所示：

旋转

旋转，就是围绕变换的原点，将元素按顺时针或逆时针方向旋转指定的角度。旋转只有一个变换函数：

rotate(θ)：将元素旋转 θ 所指定的角度。角度的单位为度（deg），正值表示顺时针旋转，负值表示逆时针旋转。

如，transform: rotate(45deg)，表示将元素按顺时针方向旋转45°。运行效果如图 8‑4 所示：

缩放

缩放，就是基于变换的原点，将元素在水平或垂直方向上缩小或放大指定的倍数。缩放有三个变换函数：

1）scale(sx, sy)：在水平方向和垂直方向同时缩放（即 x 轴和 y 轴同时缩放）。如果未提供 sy，则 sy 与 sx 相等，即表示 x，y 两个方向的缩放比例相同。

参数 sx 表示在 x 轴方向的缩放比例，大于 1 时放大，小于 1 时缩小；参数 sy 表示在 y 轴方向的缩放比例，大于 1 时放大，小于 1 时缩小。默认情况下，sx 和 sy 参数的值均为 1，即不进行缩放。sx, sy 既可以是正值、也可以是负值。为负值时，首先把坐标轴的方向改变为相反方向，使元素在该方向上发生翻转，然后再执行缩放操作。

如，transform: scale (2, 1.5)，表示将元素在 x 轴方向放大 2 倍，在 y 轴方向放大 1.5倍。运行效果如图 8‑5 所示：

2）scaleX(sx)：只在 x 轴（水平方向）进行缩放，相当于scale(sx, 1)。

如，transform: scaleX (2)，表示将元素在 x 轴方向放大 2 倍，在 y 轴方向不进行缩放。运行效果如图 8‑6 所示：

3）scaleY(sy)：只在 y 轴（垂直方向）进行缩放，相当于scale(1, sy)。

如，transform: scaleY (1.5)，表示将元素在 y 轴方向放大1.5 倍，在 x 轴方向不进行缩放。运行效果如图 8‑7 所示：

倾斜

倾斜，就是基于变换的原点，让元素绕水平轴或垂直轴倾斜指定的角度，也就是以 x 轴或 y 轴为轴心，让元素倾斜指定的角度。倾斜有三种个变换函数：

1）skew(θx, θy)：在水平方向和垂直方向同时倾斜（即同时绕 x 轴和 y 轴倾斜）。如果未提供 θy，则使用默认值 0。

参数 θx 表示绕 x 轴倾斜的角度，正值表示逆时针倾斜，负值表示顺时针倾斜；参数 θy表示绕 y 轴倾斜的角度，正值表示顺时针倾斜，负值表示逆时针倾斜。注意两个参数的默认倾斜方向不同。

如，transform: skew(30deg, 10deg)，表示元素在 x 轴方向按逆时针倾斜30°，在 y 轴方向按顺时针倾斜10°。效果如图 8‑8 所示：

skew() 是一个非常有用的变形函数，它可以将一个元素围绕着 x 轴或 y 轴，按一定角度进行倾斜。它与 rotate() 函数不同，rotate() 函数只是旋转，而不会改变元素的形状，skew() 函数会改变元素的形状。

从上图可以看出，经过skew() 函数变形之后，元素的形状发生了改变，由原来的矩形，变成了现在的菱形。

2）skewX(θx)：只按 x 轴（水平方向）进行倾斜，相当于 skew(θx, 0)。

如，transform: skewX(30deg)，表示元素在 x 轴方向按逆时针倾斜30°，在 y 轴方向不进行倾斜。效果如图 8‑9 所示：

3）skewY(θy)：只按 y 轴（垂直方向）进行倾斜，相当于skew (0, θy)。

如，transform: skewY(10deg)，表示元素在 y 轴方向按逆时针倾斜10°，在 x 轴方向不进行倾斜。效果如图 8‑10 所示：

矩阵变换

使用 transform 的变换函数 translate()、rotate()、scale()、skew()，让平移、旋转、缩放、倾斜等操作变得很简单，也很方便。

如果要对一个元素同时应用平移、旋转、缩放、倾斜等操作，就需要在 transform属性中指定多个变换函数，函数之间用空格分开。

为了方便，CSS提供了矩阵函数 matrix()，只需一个函数，就可以对元素同时应用多个变换函数。

2D变换矩阵是一个 3×3 的矩阵，共有6个参数，其格式为 matrix(a, b, c, d, e, f)，这些参数对应的矩阵为：

简单的讲，matrix() 函数就表示，使用 a, b, c, d, e, f 这6个参数所构成的 3×3 的变换矩阵，通过矩阵乘法，来实现一个2D变换。变换规则如下：

其中，x、y是元素初始原点的坐标，x’ 、y’ 是变换后得到新原点的坐标。简化后，上述矩阵乘法运算得到的公式为：

x’ = ax + cy + e 

y’ = bx + dy + f

根据上面的公式，使用不同的变换矩阵，就可以得到不同的变换效果。也就是说，只需为 a, b, c, d, e, f 提供特定的值，translate()、rotate()、scale()、skew() 这些变换函数，都可以通过矩阵函数 matrix() 实现。不同变换函数所对应的 matrix() 函数为：

• translate(tx, ty)：对应matrix(1, 0, 0, 1, tx, ty)。
• scale(sx, sy)：对应matrix(sx, 0, 0, sy, 0, 0)。
• rotate(θ)：对应matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0)。
• skew(θx, θy)：对应matrix(1, tan(θy), tan(θx), 1, 0, 0)。

说明：改变变换的原点

默认情况下，transform 所进行的 translate、rotate、scale、skew、matrix 等操作，都是以元素自身的中心点进行的。但很多时候，需要在不同的位置执行变换操作。这时，就可以通过 transform-origin 属性改变变换原点的位置，改变原点后，所有变换操作都将参考新原点进行。transform-origin的语法格式为：

transform-origin: (ox, oy)

其中，参数 ox 表示 x 轴的原点位置，参数 oy 表示 y 轴的原点位置。ox 和oy 的值可以是长度值、或百分比、或预定义值，数值允许负值。x 轴预定义值有 left（左边）、center（中间）、right（右边），y 轴预定义值有top（顶部）、center（中间）、bottom（底部）。如果未提供 oy 的值，则使用默认值 50%。

如，transform-origin: (left, top)，水平方向上的原点为元素的左边，垂直方向上的原点为元素的顶部，即新基点为元素的左上角。如 图 8‑11 所示：

如，transform-origin: (right)，水平方向上的原点为元素的右边，垂直方向上的原点为元素50%的位置。如图 8‑12 所示：

如，transform-origin: (25%, 75%)，水平方向上的原点为元素25%的位置，垂直方向上的原点为元素75%的位置。如图 8‑13 所示：