CSS3中的變形 縮放 scale

2021-09-24 05:16:32 字數 751 閱讀 7858

縮放 scale()函式 讓元素根據中心原點對物件進行縮放。

縮放 scale 具有三種情況:

1、 scale(x,y)使元素水平方向和垂直方向同時縮放(也就是x軸和y軸同時縮放)

例如:

div:hover
注意:y是乙個可選引數,如果沒有設定y值,則表示x,y兩個方向的縮放倍數是一樣的。

2、scalex(x)元素僅水平方向縮放(x軸縮放)

3、scaley(y)元素僅垂直方向縮放(y軸縮放)

html**:

css**:

width: 200px;

height: 200px;

border:2px dashed red;

margin: 100px auto;

} width: 200px;

height: 200px;

line-height: 200px;

background: orange;

text-align: center;

color: #fff;

} opacity: .5;

-webkit-transform: scale(1.5);

-moz-transform:scale(1.5)

transform: scale(1.5);}

注意: scale()的取值預設的值為1,當值設定為0.01到0.99之間的任何值,作用使乙個元素縮小;而任何大於或等於1.01的值,作用是讓元素放大。

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中的變形(transform)

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