CSS3 2D 轉換

CSS3 2D 轉換

CSS3 轉換

CSS3轉換,我們可以移動,比例化,反過來,旋轉,和拉伸元素。

它是如何運作?

變換的效果,讓某個元素改變形狀,大小和位置。

您可以轉換您使用2D或3D元素。

2D 轉換

在本章您將了解2D變換方法:

translate()

rotate()

scale()

skew()

matrix()

translate() 方法

##translate()方法,根據左(X軸)和頂部(Y軸)位置給定的參數,從目前元素位置移動。

transform: translate(50px,100px);

translate值(50px,100px)是從左邊元素移動50個像素,並從頂部移動100像素。

rotate() 方法

rotate()方法,在一個給定度數順時針旋轉的元素。負值是允許的,這樣是元素逆時針旋轉。

transform: rotate(30deg);

rotate值(30deg)元素順時針旋轉30度。

scale() 方法

scale()方法,該元素增加或減少的大小,取決於寬度(X軸)和高度(Y軸)的參數:

transform: scale(2,4);

scale(2,4)轉變寬度為原來的大小的2倍,和原始大小4倍的高度。

skew() 方法

skew()方法,該元素會根據橫向(X軸)和垂直(Y軸)線參數給定角度:

transform: skew(30deg,20deg);

skew(30deg,20deg)是繞X軸和Y軸周圍20度30度的元素。

matrix() 方法

matrix()方法和2D變換方法合併成一個。

transform:matrix(0.866,0.5,-0.5,0.866,0,0);

matrix 方法有六個參數,包含旋轉,縮放,移動(平移)和傾斜功能。


繼續學習
||
<!DOCTYPE html> <html> <head> <style> div { margin:30px; width:200px; height:100px; background-color:#00ff00; /* Rotate div */ transform:rotate(9deg); -ms-transform:rotate(9deg); /* Internet Explorer */ -moz-transform:rotate(9deg); /* Firefox */ -webkit-transform:rotate(9deg); /* Safari 和 Chrome */ -o-transform:rotate(9deg); /* Opera */ } </style> </head> <body> <div>Hello World</div> </body> </html>