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属性，从新设置元素基点对元素进行倾斜变形。