css3 缩放scale()方法

一、scale()方法

缩放，指的是“缩小”和“放大”。在CSS3中，我们可以使用scale()方法来将元素根据中心原点进行缩放。

跟translate()方法一样，缩放scale()方法也有3种情况：

（1）scaleX(x)：元素仅水平方向缩放（X轴缩放）；

（2）scaleY(y)：元素仅垂直方向缩放（Y轴缩放）；

（3）scale(x,y)：元素水平方向和垂直方向同时缩放（X轴和Y轴同时缩放）；

1、scaleX(x)

语法：

transform:scaleX(x)

说明：

x表示元素沿着水平方向（X轴）缩放的倍数，如果大于1就代表放大；如果小于1就代表缩小。

大家想想倍数是怎样一个概念就很好理解了。

2、scaleY(y)

语法：

transform:scaleY(y)

说明：

y表示元素沿着垂直方向（Y轴）缩放的倍数，如果大于1就代表放大；如果小于1就代表缩小。

3、scale(x,y)

语法：

transform:scale(x,y)

说明：

x表示元素沿着水平方向（X轴）缩放的倍数，y表示元素沿着垂直方向（Y轴）缩放的倍数。

注意，Y是一个可选参数，如果没有设置Y值，则表示X、Y两个方向的缩放倍数是一样的（同时放大相同倍数）。

举例：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>CSS3缩放scale()方法</title>

<style type="text/css">

/*设置原始元素样式*/

#origin

{

margin:100px auto;/*水平居中*/

width:200px;

height:100px;

border:1px dashed gray;

}

/*设置当前元素样式*/

#current

{

width:200px;

height:100px;

color:white;

background-color: #3EDFF4;

text-align:center;

transform:scaleX(1.5);

-webkit-transform:scaleX(1.5); /*兼容-webkit-引擎浏览器*/

-moz-transform:scaleX(1.5); /*兼容-moz-引擎浏览器*/

}

</style>

</head>

<body>

<div id="origin">

<div id="current"></div>

</div>

</body>

</html>

在浏览器预览效果如下：

分析：

从上图可以看出，元素沿着X轴方向放大了1.5倍（两个方向同时延伸，整体放大1.5倍）。

transform:scaleY (1.5);

-webkit-transform:scaleY(1.5); /*兼容-webkit-引擎浏览器*/

-moz-transform:scaleY(1.5); /*兼容-moz-引擎浏览器*/

当使用上面代码时，在浏览器预览效果如下：