Question

虽然两个英文单词发音相似，但CSS变形（transformation，包括2D变形和3D变形）和CSS过渡（transitions）完全不同。可以这样理解：过渡元素从一种状态平滑转换到另一种状态，而变形则定义了元素将会变成什么样子。我自己（极其幼稚）的理解是这样的：

想象一下《变形金刚》里的擎天柱，他先变形（transform）为别的东西，经过一段时间的过渡（transition）又变成了卡车。

可能刚才的这个比喻把你搞得更晕了（或者你根本不知道擎天柱是谁），还是直接说正题吧。我们来给AND THE WINNER ISN'T网站的导航链接在悬停时添加一个2D变形：

在现代浏览器中，在导航链接上悬停鼠标就会看到如下效果：

我们告知浏览器当鼠标悬停在链接上时，将其放大到原始大小的1.7倍。

现在如果你尝试在Safari浏览器中添加这种规则，须注意它需要应用该规则的原始元素必须以块状显示。示例如下：

不这样做的话，什么效果都没有，你懂的，垃圾得很。

我们能做哪些变形

有两种可用的CSS3变形：2D变形和3D变形。2D变形的实现更广泛，浏览器支持更好，写起来也更简单些，所以我们先来看看2D变形。CSS3的2D变形模块允许我们使用下列变形。

scale：用来缩放元素（放大或缩小）

translate：在屏幕上移动元素（上下左右四个方向）

rotate：按照一定角度旋转元素（单位为度）

skew：沿X和Y轴对元素进行斜切

matrix：允许你以像素精度来控制变形效果

接下来我们逐个试验一下，看看会有什么效果。

1. scale

我们前面看到过这种变形效果。但是除了我们刚才使用的正整数值，还要知道使用小于1的值可以缩小元素；下面的代码就会将元素缩小一半：

2. translate

translate会告知浏览器按照一定度量值移动元素，可以使用像素或百分比。语法是第一个值表示从左向右移动的距离（本例中是40像素），然后是从上往下移动的距离（本例中是0像素，所以元素与其他导航链接保持对齐）。正值会让元素向右或向下移动，负值则会让元素向左或向上移动。所以本例中对导航链接的声明效果是：链接在鼠标悬停时水平向右移动40像素。

3. rotate

rotate允许你旋转一个元素。在本例中，我们将链接悬停的变形修改为旋转90度。在浏览器中的效果如下：

括号中的值只能以度为单位（如90deg）。当然，这也挡不住你胡来——你可以让一个元素按照下面所设定的这个值来旋转：

这会让元素旋转整整10圈。这么奇怪的值，其用处少之又少，除非你给一家风车公司设计网站，那倒可能会派上用场。

4. skew

如果你多少有点Photoshop经验，就会知道skew（斜切）是怎么回事，它会让元素在一个或两个轴上变形偏斜。

在悬停状态的导航链接上应用该规则，产生的效果如下：

第一个值是X轴上的斜切（本例中是10度），第二个值是Y轴上的斜切（本例中是2度）。省略第二个值意味着仅有的值只会应用在X轴上（水平方向）。例如：

这样写完全有效，只是斜切仅会作用于X轴。斜切值始终以度为单位。正值沿顺时针方向斜切，负值则沿逆时针方向斜切。

5. matrix

好，现在该聊聊那个被严重抬高的电影⁽²⁾了。什么电影？！别忘了你要讲的是CSS3中的matrix，不是电影！是吗？好吧，看下面……

matrix变形的语法看起来超复杂：

它基本上能让你将若干变形效果（scale、rotate、skew等等）组合成单个声明。上面的声明在浏览器中产生的效果如下：

总的来说，我还是蛮喜欢挑战难题的，但我相信你也会同意这语法也太有挑战性了。而且在你看了规范文档之后就会发现问题更难，要完全理解矩阵你得了解相关的数学知识：http://www.w3.org/TR/css3-2d-transforms/#cssmatrix-interface。

傻瓜化的矩阵变形工具

无论怎么想象我都不是一个数学家，所以当我需要创建矩阵变形时，我一般都走捷径。如果你的数学也不太好，我建议你访问这里：http://www.useragentman.com/matrix/。

Matrix Construction Set这个网站可以让你精确地将元素拖曳成想要的样子，然后它会自动生成完美的矩阵代码（代码中包含了浏览器私有前缀）。

6. transform-origin属性

在使用上述变形效果的同时，你还可以使用transform-origin属性来修改变形效果的起点：

将上面的规则应用到导航链接上，鼠标悬停之后的效果如下：

transform-origin属性默认就在起作用，变形的起点默认是元素的中心点。这个属性提供了一种方便的方法来移动变形的中心点，这样能做出很多很赞的效果。

transform-origin属性的详细信息请见这里：http://www.w3.org/TR/css3-2d-transforms/#transform-origin-property。

以上讲述了2D变形的基本要素。比起3D变形，2D变形在浏览器中被广泛地支持，它为我们提供了一种轻量便捷的方法，让现代浏览器的用户体验得以锦上添花。

CSS3的2D变形模块的完整规范文档请见：http://www.w3.org/TR/css3-2d-transforms/。