CSS3效果的屬性用法

2021-09-01 07:10:25 字數 960 閱讀 9163

rotate

rotate(旋轉)允許你通過傳遞乙個度數值來轉動乙個物件。

scale

scale是乙個縮放功能,可以讓任一元素變的更大。它使用正數和負數以及小數作為引數。

translate

translate就是基於x和y 座標重新定位元素

skew

顧名思義,skew就是要將物件傾斜,引數是度數

matrixtransform支援矩陣變換,就是基於x和y 座標重新定位元素

1.rotate:

負數表示逆時針,正數表示順時針旋轉,deg是單位度。

ie有這方面的濾鏡:圖形旋轉濾鏡。它可以有4個旋轉值:0, 1, 2,和3,無法獲得和webkit一樣的精密控制。

2.scale:

元素放大1.1倍

3.translate:

正數的方向是向下向右,這裡,可以讓元素向下向右分別位移10,20畫素。

4.skew:

skew也是乙個很有用的transform功能,它可以將乙個物件圍繞著x和y軸按照一定的角度傾斜。這和rotate的旋轉不一樣,rotate只是旋轉,而不會讓元素的形狀改變。skew會讓乙個元素的形狀改變。skew有兩個引數,分別代表x和y軸的傾斜度數。

有興趣深入研究,可以看一下這裡這是svg的乙個文件,但是對於matrix變換的原理是通用的。

可以鏈式寫在一些,使**更高效:

連續的動畫的屬性transition: 

CSS3新增屬性用法整理CSS3新增屬性用法整理

css3新增屬性用法整理 css3新增屬性用法整理 1 box shadow 陰影效果 2 border color 為邊框設定多種顏色 3 border image 邊框 4 text shadow 文字陰影 5 text overflow 文字截斷 6 word wrap 自動換行 7 bord...

css3屬性 border radius用法

1 doctype html 2 html 3 head 4 meta charset utf 8 5 style 6div 1314 div1 1920 div2 25style 26head 2728 body 2930 div class div1 border radius 屬性允許您向元素...

CSS3新增屬性用法整理

box shadow 陰影效果 border color 為邊框設定多種顏色 border image 邊框 text shadow 文字陰影 text overflow 文字截斷 word wrap 自動換行 border radius 圓角邊框 opacity 透明度 box sizing 控制...