在CSS3中，我們可以使用transform屬性的scale()方法來實現元素的縮放效果。縮放，指的是“縮小”和“放大”的意思。

語法：

transform: scaleX(x); /*沿X軸方向縮放*/

transform: scaleY(y); /*沿Y軸方向縮放*/

transform: scale(x, y); /*沿X軸和Y軸同時縮放*/

說明：

跟translate()方法類似，縮放也有3種情況：scaleX()、scaleY()、scale()。參數x表示元素在x軸方向的縮放倍數，參數y表示元素在y軸方向的縮放倍數。

當x或y取值為0~1之間時，元素進行縮小；當x或y取值大于1時，元素進行放大。大家思考一下“倍數”的概念，很快就懂了。

舉例：scaleX(x)

#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);

}

瀏覽器預覽效果如下圖所示。

分析：

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)

#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);

}

瀏覽器預覽效果如下圖所示。

分析：

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)

#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);

}

瀏覽器預覽效果如下圖所示。

分析：

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);

總結

以上是生活随笔為你收集整理的html 图片使用scale,缩放：scale() - CSS3 | 绿叶学习网的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。