CSS3 2D 轉(zhuǎn)換
CSS3轉(zhuǎn)換,我們可以移動(dòng),比例化,反過(guò)來(lái),旋轉(zhuǎn),和拉伸元素。
它是如何工作?
變換的效果,讓某個(gè)元素改變形狀,大小和位置。
您可以轉(zhuǎn)換您使用2D或3D元素。
瀏覽器支持
表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號(hào)。
緊跟在 -webkit-, -ms- 或 -moz- 前的數(shù)字為支持該前綴屬性的第一個(gè)瀏覽器版本號(hào)。
Internet Explorer 10, Firefox, 和 Opera支持transform 屬性.
Chrome 和 Safari 要求前綴 -webkit- 版本.
注意: Internet Explorer 9 要求前綴 -ms- 版本.
2D 轉(zhuǎn)換
在本章您將了解2D變換方法:
translate()
rotate()
scale()
skew()
matrix()
在下一章中您將了解3D轉(zhuǎn)換。
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> div { width:200px; height:100px; background-color:yellow; /* Rotate div */ transform:rotate(30deg); -ms-transform:rotate(30deg); /* IE 9 */ -webkit-transform:rotate(30deg); /* Safari and Chrome */ } </style> </head> <body> <div>Hello</div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
translate() 方法
translate()方法,根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù),從當(dāng)前元素位置移動(dòng)。
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> div { width:100px; height:75px; background-color:red; border:1px solid black; } div#div2 { transform:translate(50px,100px); -ms-transform:translate(50px,100px); /* IE 9 */ -webkit-transform:translate(50px,100px); /* Safari and Chrome */ } </style> </head> <body> <div>Hello. This is a DIV element.</div> <div id="div2">Hello. This is a DIV element.</div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
translate值(50px,100px)是從左邊元素移動(dòng)50個(gè)像素,并從頂部移動(dòng)100像素。
rotate() 方法
rotate()方法,在一個(gè)給定度數(shù)順時(shí)針旋轉(zhuǎn)的元素。負(fù)值是允許的,這樣是元素逆時(shí)針旋轉(zhuǎn)。
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> div { width:100px; height:75px; background-color:red; border:1px solid black; } div#div2 { transform:rotate(30deg); -ms-transform:rotate(30deg); /* IE 9 */ -webkit-transform:rotate(30deg); /* Safari and Chrome */ } </style> </head> <body> <div>你好。這是一個(gè) DIV 元素。</div> <div id="div2">你好。這是一個(gè) DIV 元素。</div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
rotate值(30deg)元素順時(shí)針旋轉(zhuǎn)30度。
scale() 方法
scale()方法,該元素增加或減少的大小,取決于寬度(X軸)和高度(Y軸)的參數(shù):
實(shí)例
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:75px; background-color:red; border:1px solid black; } div#div2 { margin:100px; transform:scale(2,4); -ms-transform:scale(2,4); /* IE 9 */ -webkit-transform:scale(2,4); /* Safari and Chrome */ } </style> </head> <body> <div>Hello. This is a DIV element.</div> <div id="div2">Hello. This is a DIV element.</div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
scale(2,4)轉(zhuǎn)變寬度為原來(lái)的大小的2倍,和其原始大小4倍的高度。
skew() 方法
skew()方法,該元素會(huì)根據(jù)橫向(X軸)和垂直(Y軸)線參數(shù)給定角度:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> div { width:100px; height:75px; background-color:red; border:1px solid black; } div#div2 { transform:skew(30deg,20deg); -ms-transform:skew(30deg,20deg); /* IE 9 */ -webkit-transform:skew(30deg,20deg); /* Safari and Chrome */ } </style> </head> <body> <div>Hello. This is a DIV element.</div> <div id="div2">Hello. This is a DIV element.</div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
skew(30deg,20deg)是繞X軸和Y軸周圍20度30度的元素。
matrix() 方法
matrix()方法和2D變換方法合并成一個(gè)。
matrix 方法有六個(gè)參數(shù),包含旋轉(zhuǎn),縮放,移動(dòng)(平移)和傾斜功能。
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> div { width:100px; height:75px; background-color:red; border:1px solid black; } div#div2 { transform:matrix(0.866,0.5,-0.5,0.866,0,0); -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ } </style> </head> <body> <div>Hello. This is a DIV element.</div> <div id="div2">Hello. This is a DIV element.</div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
新轉(zhuǎn)換屬性
以下列出了所有的轉(zhuǎn)換屬性:
Property | 描述 | CSS |
---|---|---|
transform | 適用于2D或3D轉(zhuǎn)換的元素 | 3 |
transform-origin | 允許您更改轉(zhuǎn)化元素位置 | 3 |
2D 轉(zhuǎn)換方法
函數(shù) | 描述 |
---|---|
matrix(n,n,n,n,n,n) | 定義 2D 轉(zhuǎn)換,使用六個(gè)值的矩陣。 |
translate(x,y) | 定義 2D 轉(zhuǎn)換,沿著 X 和 Y 軸移動(dòng)元素。 |
translateX(n) | 定義 2D 轉(zhuǎn)換,沿著 X 軸移動(dòng)元素。 |
translateY(n) | 定義 2D 轉(zhuǎn)換,沿著 Y 軸移動(dòng)元素。 |
scale(x,y) | 定義 2D 縮放轉(zhuǎn)換,改變?cè)氐膶挾群透叨取?/td> |
scaleX(n) | 定義 2D 縮放轉(zhuǎn)換,改變?cè)氐膶挾取?/td> |
scaleY(n) | 定義 2D 縮放轉(zhuǎn)換,改變?cè)氐母叨取?/td> |
rotate(angle) | 定義 2D 旋轉(zhuǎn),在參數(shù)中規(guī)定角度。 |
skew(x-angle,y-angle) | 定義 2D 傾斜轉(zhuǎn)換,沿著 X 和 Y 軸。 |
skewX(angle) | 定義 2D 傾斜轉(zhuǎn)換,沿著 X 軸。 |
skewY(angle) | 定義 2D 傾斜轉(zhuǎn)換,沿著 Y 軸。 |