CSS3 scale 函式和多重轉換

2021-09-26 08:45:50 字數 503 閱讀 9927

scale()方法根據已設定的寬度和高度引數來增加或減少元素的大小。

1代表原始尺寸,2代表原始尺寸的兩倍,依次類推。

在下面的例子中,我們在水平和垂直方向上將第乙個div減少0.6倍,並將第二個div在水平和垂直方向增加1.6倍。

css**如下:

div.first

div.second

執行如果如下:

如果只傳遞了乙個引數,則預設寬度和高度都使用該引數

例如:transform:scale(0.3); /將元素減少到原始大小的30%/

transform:scale(1.5) /將元素增加到原始大小的150%/

多重轉換:

一次可以使用多個轉換。同時旋轉和縮放元素的大小就是乙個例子。

對元素應用多個變換很簡單,只是用空格分開他們。

div執行結果如下:

CSS3 變形 縮放 scale

縮放 scale 函式讓元素根據中心原點對物件進行縮放。縮放 scale 具有三種情況 1 scale x,y 使元素水平方向和垂直方向同時縮放 也就是x軸和y軸同時縮放 例如 div hover注意 y是乙個可選引數,如果沒有設定y值,則表示x,y兩個方向的縮放倍數是一樣的。2 scalex x ...

css3的transform中scale縮放詳解

下面我們從3個方面開始介紹 1 scale x,y 對元素進行縮放 x表示水平方向縮放的倍數 y表示垂直方向的縮放倍數 y是乙個可選引數,沒有設定的話,則表示x,y兩個方向的縮放倍數是一樣的。並以x為準。transform scale 2,2.5 2 scalex 元素只在x軸 水平方向 縮放元素。...

CSS3中的變形 縮放 scale

縮放 scale 函式 讓元素根據中心原點對物件進行縮放。縮放 scale 具有三種情況 1 scale x,y 使元素水平方向和垂直方向同時縮放 也就是x軸和y軸同時縮放 例如 div hover注意 y是乙個可選引數,如果沒有設定y值,則表示x,y兩個方向的縮放倍數是一樣的。2 scalex x...