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

3  scale() 方法

通过scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X轴）和高度（Y轴）参数。缩放scale()函数让元素根据中心原点对对象进行缩放。默认值是1，因此0.01到0.99之间的任何值，使一个元素缩小；而任何大于或等于1.01的值，让元素显得更大。缩放scale()和translate()函数的语法非常相似，它可以接受一个值，也可以同时接受两个值，如果只有一个值时，其第二个值默认与第一个值相等。例如：scale(1,1)元素不会有任何变化，而scale(2,2)让元素沿X轴和Y轴放大两倍。其语法如下：

scale(sx)

或者：

scale(sx,sy)

该函数属性的取值及描述如表4:

表4  scale()旋转函数属性值及描述

同样，我们通过一个小案例来解释scale方法。这里有两张图片并排显示，其中我们为第二张图片对一个图片使用scale放大1.2倍，可以使用scale(1.2)，也可以使用scale(1.2,1.2)，表示X轴和Y轴都放大1.2倍。代码如下：

这里，我们展示了两张图片，第一张以原图显示，第二张被放大为原来的1.2倍。在浏览器里的执行效果如图6：

图6  scale缩放函数

如果将值设置为“0”时，元素将消失。当我们仅给scale()函数只显式设置一个值时，会使对象成正比例放大或缩小。

在scale()函数中，除了可以取正值之外，还可以去负值。只不过取负值时，会让元素进行翻转，然后再进行缩放。scale()函数在对元素进行缩放时，都是以元素的中心为基点，但可以通过transform-origin来改变元素的基点。

4  skew() 方法

通过skew() 方法，元素转动给定的角度，根据给定的水平线（X轴）和垂直线（Y轴）参数。skew()倾斜函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。其语法如下：

 skew(ax)

或者：

skew(ax,ay)

该函数属性的取值及描述如表5:

表5  skew()函数属性值及描述

下面我们使用一个简单的例子来说明skew()函数。代码如下：

这里，我们展示了两张图片，第一张以原图显示，第二张被skew()函数处理后，横向倾斜度30deg，垂直倾斜10deg。在浏览器里的执行效果如图7所示：

图7  skew倾斜函数

倾斜skew()函数和CSS3中变形中的translate()、scale()函数一样，除了可以使用skew(ax,ay)函数让元素只在水平或者垂直方向倾斜。

skewX()：相当于skew(ax,0)和skew(ax)。按给定的角度沿X轴指定一个倾斜变形。skewX()使元素以其中心为基点，并在水平方向（X轴）进行倾斜变形。

skewY()：相当于skew(0,ay)。按给定的角度沿Y轴指定一个倾斜变形。skewY()使元素以其中心为基点，并在垂直方向（Y轴）进行倾斜变形。

在默认情况下，skew()函数都是以元素的原中心点对元素进行倾斜变形。但是我们同样可以根据transform-origin属性，重新设置元素基点对元素进行倾斜变形。