CSS3 2D 轉(zhuǎn)換

CSS3 轉(zhuǎn)換

CSS3轉(zhuǎn)換，我們可以移動，比例化，反過來，旋轉(zhuǎn)，和拉伸元素。

它是如何工作？

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

您可以轉(zhuǎn)換您使用2D或3D元素。

2D 轉(zhuǎn)換

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

translate()

rotate()

scale()

skew()

matrix()

translate() 方法

translate()方法，根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù)，從當(dāng)前元素位置移動。

transform: translate(50px,100px);

translate值（50px，100px）是從左邊元素移動50個像素，并從頂部移動100像素。

rotate() 方法

rotate()方法，在一個給定度數(shù)順時針旋轉(zhuǎn)的元素。負(fù)值是允許的，這樣是元素逆時針旋轉(zhuǎn)。

transform: rotate(30deg);

rotate值（30deg）元素順時針旋轉(zhuǎn)30度。

scale() 方法

scale()方法，該元素增加或減少的大小，取決于寬度（X軸）和高度（Y軸）的參數(shù)：

transform: scale(2,4);

scale（2,4）轉(zhuǎn)變寬度為原來的大小的2倍，和其原始大小4倍的高度。

skew() 方法

skew()方法，該元素會根據(jù)橫向（X軸）和垂直（Y軸）線參數(shù)給定角度：

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 方法有六個參數(shù)，包含旋轉(zhuǎn)，縮放，移動（平移）和傾斜功能。