css3的transform中scale縮放詳解

2022-09-24 22:39:17 字數 540 閱讀 5897

下面我們從3個方面開始介紹:

1、scale(x,y) 對元素進行縮放

x表示水平方向縮放的倍數 | y表示垂直方向的縮放倍數

y是乙個可選引數,沒有設定的話,則表示x,y兩個方向的縮放倍數是一樣的。並以x為準。

transform:scale(2,2.5); 

2、scalex() 元素只在x軸(水平方向)縮放元素。

預設值是1,基點一樣在元素的中心位置。可以通過trans來改變基點

transform:scalex(2);程式設計客棧 

3、scaley() 元素只在y軸(垂直方向)縮放元素。

&nwww.cppcns.combsp;

基點一樣在uwfpn元素的中心程式設計客棧位置。可以通過transform-origin來改變基點。

transform:scaley(2); 

最後我們看看相容性寫法:

複製**

**如下:

.test

本文標題: css3的transform中scale縮放詳解

本文位址:

css3中的變形(transform)

transform 字面上的意思就是 使改變外觀 改變形態 在css3中transform主要包括以下幾種 1.旋轉 rotate 2.傾斜 skew 3.縮放 scale 4.移動 translate 語法transform none transform rotate skew scale tra...

css3中的transform方法

transform屬性應用於元素的2d或3d轉換。這個屬性允許你將元素旋轉,縮放,移動,傾斜等。translate transform的乙個方法 通過 translate 方法,元素從其當前位置移動,根據給定的 left x 座標 和 top y 座標 位置引數 用法transform transl...

css3中的transform屬性講解

屬性如下 matrix 2d矩陣 translate 平移,第乙個引數為x軸,第二個引數為y軸,第二個引數預設為0 translatex x軸 水平方向 的平移 translatey y軸 垂直方向 的平移 rotate 2d旋轉 scale 2d伸縮。第乙個引數對應x軸,第二個引數對應y軸。第二個...