CSS3中的變形處理 transform 屬性

2022-07-16 11:36:11 字數 1392 閱讀 4645

在css3中,可以利用transform功能來實現文字或影象的旋轉、扭曲、縮放、位移、矩陣、原點

這六種型別的變形處理,下面將詳細講解transform的使用。

變形--旋轉 rotate()

div.box /*

順時針旋轉45度

*/

變形--扭曲 skew()
div.box /*

通過skew()函式將長方形變成平行四邊形。

skew()具有三種情況:

1、skew(x,y)使元素在水平和垂直方向同時扭曲(x軸和y軸同時按一定的角度值進行扭曲變形);

2、skewx(x)僅使元素在水平方向扭曲變形(x軸扭曲變形);

3、skewy(y)僅使元素在垂直方向扭曲變形(y軸扭曲變形)

*/

變形--縮放 scale()
div.box /*

縮放 scale 具有三種情況:

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

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

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

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

*/

變形--位移 translate()
div.box  /*

通過translate()函式將元素向y軸下方移動50px,x軸右方移動100px。

translate我們分為三種情況:

1、translate(x,y)水平方向和垂直方向同時移動(也就是x軸和y軸同時移動)

2、translatex(x)僅水平方向移動(x軸移動)

3、translatey(y)僅垂直方向移動(y軸移動)

*/

變形--矩陣 matrix ()
div.box  /*

matrix() 6個屬性的意思的:第乙個寬度比例1就是原大小,

第二個是上下傾斜1就是2倍,2就是3倍,0就是不傾斜

第三個是左右傾斜,數字和第二個一樣的意思,

第四個是高度比例1就是原大小,

第五個是x方向的畫素位移,x方向就是左右,

第六個是y方向的畫素位移,x方向就是上下

*/

變形--原點 transform-origin
div.box  /*

改變元素原點到左上角,然後進行順時旋轉45度。

*/

css3 變形處理 transform

在css3中可以利用transform功能來實現文字影象的旋轉 縮放 傾斜 移動這四種型別的變形處理 相容性 瀏覽器safari chrome 8 firefox 4 opera 10 各個瀏覽器寫法 示例文字div css div解析 rotate 45deg 含義 rotate是旋轉,45deg...

css3中的變形(transform)

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

CSS3中的變形功能

一.變形主要值得是利用transform功能來實現文字或的旋轉,縮放,傾斜,移動這四種處理。1.旋轉 transform rotate xxdeg ie9以上,safari 3.1以上,chrome 8以上 firefox 4以上 opera 10以上的瀏覽器都支援這些屬性 先看例子 這是乙個測試。...