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

5f16a58a57bc47108e1c532aebeafd05.jpg

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()旋转函数属性值及描述

image/20191127/9f6edcb9b736e01084f824ed18994c31.png

   

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

image/20191127/55ebd3a280c8ee6cc46d37966e725efe.png

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

image/20191127/15d03e70f0652454415fa26bbbfa4313.jpeg

图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()函数属性值及描述

image/20191127/2a935f8d79b11f5f42991ffe88339167.png

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

image/20191127/74eba3ced993c33ad84ece945b6ae718.png

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

image/20191127/215aafb3b5cc33243468b5162ac592d5.jpeg

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

猜你喜欢

转载自www.cnblogs.com/itxdl/p/11968696.html