IT兄弟连 HTML5教程 CSS3属性特效 2D变换1

通过CSS3转换，能够对元素进行移动、缩放、转动、拉长或拉伸。它如何工作？转换是使元素改变形状、尺寸和位置的一种效果。CSS3转换包括2D转换和3D转换，本小结我们来了解2D变换的转换方法。

转换属性包含transform和transform-origin，它们的介绍如表1：

表1  转换属性

其中，transform有五种方法，它们的方法介绍如表2：

表2  transform方法

1  translate()方法

通过translate() 位移函数，元素从其当前位置移动，根据给定的left（x坐标） 和top（y坐标） 位置参数。translate()方法可以拆分为translateX()和translateY()方法，分别对元素的left和top位置设置参数。下面通过一个实例来解释这个方法，我们为img元素的left设置为0，top设置为0，当鼠标移入浏览器后，让它相对与当前位置向下移动50px，向右移动100px，再给它设定一个过渡效果，以便读者可以更好的体会到translate()方法实现的效果，代码如下：

该代码的解释为，img图像的left为100px，在浏览器里的执行初始效果如图1所示：

图1  translate()方法

当鼠标移入到浏览器后，我们可以发现图片的位置发生了改变，相对于之前的位置向下移动了50px，向右移动了100px，在浏览器里的执行效果如图2所示：

图2  translate()方法

2  rotate() 方法

通过rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。默认旋转基点为元素中心。

同样，我们通过一个小案例来解释这个方法。一个html文档里包含一个img元素，当鼠标移入该文档时，让图片旋转180deg。代码如下：

该代码的解释为，img图像初始状态没有旋转过，当鼠标移入body时，图片经过2s顺时针旋转180deg，默认的旋转基点为图片中心。在浏览器里的执行初始效果如图3：

图3  rotate旋转

当鼠标移入到浏览器后，我们可以发现图片变成了倒立的，也就是旋转了180deg，在浏览器里的执行效果如图4：

图4  rotate旋转

另外，我们还可以为该图片设置旋转基点，transform-origin属性允许我们改变被转换元素的位置，2D转换元素能够改变元素x轴和y轴。该属性的语法为：

transform-origin: x-axis y-axis z-axis;

该属性默认值为“50% 50% 0”。针对2D转换，我们可以先忽略z-axis，它是针对3D转换需要设定的值，我们会在下一小节提到。该属性的取值及描述如表3:

表3 转换属性

通过使用transform-origin来设置转换元素的位置为左上角。将上述案例的CSS代码替换如下：

当鼠标移入到body后，我们可以发现图片绕着左边界的中心点旋转了180deg，在浏览器里的执行效果如图5所示：

图5 设置转换元素的位置