在css3中可實現縮放效果的是什麼屬性

在css3中可實現縮放效果的是transform屬性。 transform屬性可以和scaleX()函數實現水平方向的縮放效果、可以和scaleY()函數實現垂直方向的縮放效果、可和“scale(x,y)”函數實現水平方向和垂直方向同時縮放。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

在css3中可實現縮放效果的是transform屬性。

transform屬性套用於元素的2D或3D轉換。這個屬性允許你將元素旋轉，縮放，移動，傾斜等。

transform屬性配合縮放方法可以將元素依照中心原點進行縮放。

css3縮放方法有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兩個方向的縮放倍數是一樣的（同時放大相同倍數）。

範例：

	
		
		
	
	
		
		

			

				

			
			
scale(2)
		
		

			

				

			
			
scaleX(2) 
		
		

			

				

			
			
scaleY(2) 
		
	

（學習影片分享：

css影片教學、web前端）

以上是在css3中可實現縮放效果的是什麼屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！