使用 CSS 转换为你的网页带来活力让你的网页栩栩如生

 

使用级联样式表 (CSS) 转换，你可以在二维和三维空间内转换元素。 使用 CSS 转换，你可以在元素的父元素中更改元素的位置，操作元素的旋转或缩放以及应用扭曲失真。添加 perspective 属性（或 perspective 转换函数）可将第三维添加到转换。

我们将在这里介绍 CSS 转换坐标系统。然后，我们将演示 CSS 公布的转换功能，并以图示 perspective 属性的效果圆满结束。

CSS 转换的坐标系统

CSS 转换沿一组形成坐标系统的轴定义。二维转换沿两个轴定义，如下所示。请注意 y 轴向下扩展，而不是如大多数二维笛卡尔坐标系统所呈现的向上扩展。

坐标系统的 x 轴沿转换的元素的父节点的水平维度扩展。y 轴沿垂直维度扩展。此坐标系统的原点（图表中的“(0,0)”）最初位于要转换的元素的中心（除非由 transform-origin 属性更改，这将在稍后部分讨论）。

三维转换沿三个轴定义，如下所示。（包含网格线以帮助实现 3-D 图像的可视化。）

坐标系统的 z 轴与 x 轴和 y 轴同时垂直。此坐标系统的原点（图表中的“(0,0,0)”）也位于要转换的元素的中心，除非 transform-origin 属性对其进行了更改。

应用转换

向元素应用转换非常简单。首先，将 transform 属性添加到选择器，然后附加一列转换函数。例如，以下声明应用一个平移转换：

CSS

 

transform: translateX(400px);

此转换的结果是将初始元素向右平移（移动）了 400 像素。如果我们将此转换应用于绿色方块 div 元素，则会获得以下结果。出于说明的目的，除了转换后的元素，还显示了应用转换前元素的外观，原始元素将灰显。

你可以查看此示例的实时版本。请 注意，为获得浏览器最大兼容性，你应在要支持的每个浏览器的转换属性前包含适当的浏览器特定的前缀。例如，以下声明确保在 Windows Internet Explorer 9 中提供支持：("-ms-")，在 Chrome 和 Safari 中为 ("-webkit-")，在 Firefox 中为 ("-moz-")，在 Opera 中为 ("-o-")，且浏览器不需要前缀，例如 Internet Explorer 10。

CSS

 

  -ms-transform: translateX(400px);
  -webkit-transform: translateX(400px);
  -moz-transform: translateX(400px);
  -o-transform: translateX(400px);
  transform: translateX(400px);

2-D 转换函数

在 2-D 转换中支持使用这些转换函数，并且从 Internet Explorer 9 开始可以使用这些转换函数。

函数 描述

matrix(a, b, c, d, e, f)	采用六个值的转换矩阵的形式指定 2-D 转换。
rotate(angle)	指定按有关元素来源的参数中指定的角度进行 2-D 旋转。
scale(sx,sy)	通过由两个参数表示的 [sx,sy] 缩放矢量来指定 2-D 缩放操作。
scaleX(sx)	通过使用 [sx,1] 缩放矢量来指定缩放操作，其中 sx 作为参数给定。
scaleY(sy)	通过使用 [1,sy] 缩放矢量来指定缩放操作，其中 sy 作为参数给定。
skew(angleX,angleY)	指定沿 x 轴和 y 轴的扭曲转换。第一个角度参数指定 x 轴上的扭曲。第二个角度参数指定 y 轴上的扭曲。
skewX(angle)	按给定的角度指定沿 x 轴的扭曲转换。
skewY(angle)	按给定的角度指定沿 y 轴的扭曲转换。
translate(tx,ty)	按矢量 [tx,ty] 指定 2-D 平移，其中 tx 为第一个平移值参数，ty 为可选的第二个平移值参数。
translateX(tx)	通过 x 方向上的给定值来指定平移。
translateY(ty)	通过 y 方向上的给定值来指定平移。

 

对于平移函数，参数可以为受支持的 CSS 长度类型或百分比。对于旋转和扭曲函数，参数可以为受支持的 CSS 角度类型或原始数（可解释为旋转度数）。最后，缩放函数接受数字参数，这表示缩放因子。

2-D 转换示例

现在，让我们来看看几个二维 CSS 转换的应用。

我们将从沿 y 轴的平移开始。谨记，平移值将解释为距页面布局中元素的原始位置的偏移量。

查看此示例的实时演示。

现在，让我们尝试进行一些旋转、扭曲和缩放操作。此屏幕截图反复地展示了一个方块 div，它将一个转换重复应用。

查看此示例的实时演示。

matrix 转换函数未在此处展示。此函数使你能够手动指定自定义 2-D 转换。在尝试手动指定转换之前，最好先熟悉一下转换坐标系统和呈现。

应用多个转换

通过链接多个转换函数 — 采用要应用转换的顺序将多个转换函数添加到单个转换属性，你可以应用多个转换。请注意，附加转换的顺序会影响最终的结果。让我们来看个示例。

以下声明看上去可能类似，但它们会产生不同的结果。

 

 

transform: rotate(45deg) translateX(200px);
transform: translateX(200px) rotate(45deg);

在此处你可以看到应用于不同 div 元素的两个声明。下面是此示例的屏幕截图。原始元素的位置以灰色框标注。紫色（页首）框先应用了 translateX 函数，然后应用了 rotate 函数。粉色（底部）框首先旋转，然后平移。

更改转换来源

请考虑以下转换：

 

 

transform: rotate(45deg);

在你的浏览器中查看此示例。

转换的元素围绕其中心旋转。但如果我们希望元素围绕其一个角旋转该怎么办？或者围绕任意点旋转该怎么办？这时就要用到 transform-origin 属性了。

通过 transform-origin 属性，你可以为一个元素指定转换的初始位置。在旋转时，更改转换初始值将移动旋转的中心。transform-origin 属性的初始值为 "50% 50%"，表示初始位置为元素的中心。如果未指定 transform-origin 属性，则这是默示值。

让我们看一些将这个相同的 rotate 声明应用于 transform-origin 属性设置为不同值的元素的示例。此示例页面包含相同的元素，它们重复应用了相同的转换，但具有不同的转换来源。 除了应用的是扭曲转换外，此示例页面基本相同。

接下来，我们开始使用 CSS 3-D 转换将深度添加到我们的网页。

3-D 转换函数

有了 Internet Explorer 10，设计人员可以通过使用 CSS 3-D 转换成功引入第三维。在 3-D 转换中支持使用此处列出的转换函数，并且从 Internet Explorer 10 开始可以使用这些转换函数。

3-D 转换的应用方式与 2-D 转换的应用方式相同（通过将 transform 属性添加到元素的样式中）。若要充分利用第三维，请扩展可用的转换函数列表以包含以下内容：

函数 描述

rotate3d(x, y, z, angle)	指定顺时针 3-D 旋转。
rotateX(angle)	指定在 x 轴上沿顺时针方向旋转给定的角度。
rotateY(angle)	指定在 y 轴上沿顺时针方向旋转给定的角度。
rotateZ(angle)	指定在 z 轴上沿顺时针方向旋转给定的角度。
scale3d(sx,sy,sz)	通过由三个参数表示的 [sx,sy,sz] 缩放矢量来指定 3-D 缩放操作。
scaleZ(sz)	通过使用 [1,1,sz] 缩放矢量来指定缩放操作，其中 sz 作为参数给定。
translate3d(tx, tytz)	通过矢量 [tx,ty,tz] 来指定 3-D 平移，其中 tx、ty 和 tz 分别是第一、第二和第三个平移值参数。
translateZ(tz)	通过 z 方向上的给定值来指定平移。
matrix3d(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p)	将 3-D 转换指定为由十六个值组成且以列为主序的 4×4 同类矩阵。

 

让我们看看使用的 3-D 转换的某些示例。此示例页面具有一行方块，每个方块应用了一个或多个转换。

你可能会注意到这些转换没有以三维形式显示。你可能希望采用三维形式，因为此类转换沿 x 或 y 轴将元素旋转“进入屏幕”，该元素看起来应越来越小。translateZ(-50px) 函数并不会更改元素的视觉外观！但是可以实现这种情况，因为默认情况下 CSS 转换使用正交投影进行计算，这是一种以二维形式表示三维形式的内容的方法。二维世界地图是你可能熟悉的一个正交投影示例。使用 CSS 转换，获得的对象并不能在移离观察者的视线时逐渐变小。

幸运的是，CSS 转换规范提供了可以轻松将射影添加到转换的属性。

将射影添加到 3-D 转换

perspective 属性将深度错觉添加到 CSS 转换。

函数 描述

perspective	指定表示距离查看对象的所有子元素的射影距离的长度值。

 

请看下图：

请注意子元素如何平展（或投影）在其父元素上。所得的射影的表面（在图表上为橙色区域）为该元素距父元素定义的图像平面的距离的因子，这基于我们为其设置的 3-D 转换的组合。此外，还应考虑父元素本身距“查看者”的距离，这在上个图中被标注为射影深度。perspective CSS 属性可以帮助你指定该距离。

请将上述示例中使用的同一转换作为示例关注，但此时，该转换应用了射影投影。

在本例中，我们将 perspective 属性（设置为 200px）应用于示例 div 元素的父元素。请注意，当你在该元素上悬停或点击该元素时，该转换的视觉结果为真正的三维形式。translateZ 转换按预期运行，即，元素距查看者越来越远而变得越来越小。另请注意，我们可以采用类似的方法将 3-D 转换组合到 2-D 转换。

微调 3-D 转换的另一个方法为使用 perspective-origin 属性。perspective-origin 属性设置与应用射影转换的元素相关的查看者的位置。换句话说，它允许我们创建离轴投影。

此示例页面与上一页面类似，但不同之处为 perspective-origin 属性设置为 "30% 50%"。

perspective-origin 的默认值为 "50% 50%"，该值表示查看位置与元素中心平行。在上例中，我们将查看位置向左偏移 ("30% 50%")。在下一示例中，你可以看到当我们通过将 perspective-origin 属性设置为 "80% 50%" 以将位置向右偏移的不同情形。

结论

到目前为止，我们已经演示了 2-D 和 3-D 形式的 CSS 转换，以及转换的某些伴随属性（transform-origin、perspective 和 perspective-origin）。

接下来，我们将介绍 CSS 过渡。

相关主题

若要了解有关 CSS 转换的详细信息，请查看以下参考资源：

• Internet Explorer 开发人员中心：CSS 转换函数
• Internet Explorer 10 开发人员指南：CSS 3-D 转换
• Internet Explorer 9 开发人员指南：CSS 2-D 转换
• 实例：Windows 8 HTML5 平台
• W3C：CSS 转换规范