在css中，可以使用transfrom屬性的scale()方法設定縮放，語法格式為「transfrom:scale(方向)」。 scale()方法用於修改元素的大小，透過向量形式定義的縮放值來放大或縮小元素，同時可在不同方向設定不同縮放值。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
在CSS3中，我們可以使用transform屬性的scale()方法來實現元素的縮放效果。縮放，指的是“縮小”和“放大”的意思。
語法：
transform: scaleX(x); /*沿X轴方向缩放*/ transform: scaleY(y); /*沿Y轴方向缩放*/ transform: scale(x, y); /*沿X轴和Y轴同时缩放*/
說明：
縮放有3種情況：scaleX()、scaleY()、scale()。參數x表示元素在x軸方向的縮放倍數，參數y表示元素在y軸方向的縮放倍數。
當x或y取值為0~1之間時，元素進行縮小；當x或y取值大於1時，元素進行放大。大家思考一下「倍數」的概念，很快就懂了。
範例：scaleX(x)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*设置原始元素样式*/
#origin
{
width:200px;
height:100px;
border:1px dashed gray;
}
/*设置当前元素样式*/
#current
{
width:200px;
height:100px;
color:white;
background-color: rgb(30, 170, 250);
opacity: 0.6;
transform:scaleX(1.5);
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>瀏覽器預覽效果如下圖所示。
分析：
transform:scaleX(1.5);表示元素在x軸方向放大為原來的1.5倍。若將1.5改為0.5，則元素會在x軸方向縮小為原來的0.5倍，此時預覽效果如下圖所示。
實際上，transform:scaleX(1.5);其實可以等價於transform:scale(1.5, 0);，小夥伴們可以自行測試一下。
範例：scaleY(y)
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*设置原始元素样式*/
#origin
{
width:200px;
height:100px;
border:1px dashed gray;
}
/*设置当前元素样式*/
#current
{
width:200px;
height:100px;
color:white;
background-color: rgb(30, 170, 250);
opacity: 0.6;
transform:scaleY(1.5);
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>瀏覽器預覽效果如下圖所示。
分析：
transform:scaleY(1.5);表示元素在y軸方向放大為原來的1.5倍。若將1.5改為0.5，則元素會在y軸方向縮小為原來的0.5倍，此時瀏覽器預覽效果如下圖所示。
實際上，transform:scaleY(1.5);其實可以等價於transform:scale(0, 1.5);，小夥伴們可以自行測試一下。
範例：scale(x, y)
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*设置原始元素样式*/
#origin
{
width:200px;
height:100px;
border:1px dashed gray;
}
/*设置当前元素样式*/
#current
{
width:200px;
height:100px;
color:white;
background-color: rgb(30, 170, 250);
opacity: 0.6;
transform:scale(1.2, 1.5);
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>瀏覽器預覽效果如下圖所示。
分析：
transform:scale(1.2, 1.5);表示元素在x軸和y軸兩個方向上同時放大，x軸方向放大為原來的1.2倍，y軸方向放大為原來的1.5倍。實際上，transform:scale(1.2, 1.5);其實可以等價於以下程式碼：
transform:scaleX(1.2); transform:scaleY(1.5);
推薦學習：css影片教學
以上是css如何設定縮放的詳細內容。更多資訊請關注PHP中文網其他相關文章！
