CSS3 轉(zhuǎn)換:
?CSS3轉(zhuǎn)換,我們可以移動(dòng),比例化叔遂,反過(guò)來(lái)症歇,旋轉(zhuǎn),和拉伸元素唠摹。
2D轉(zhuǎn)換方法:
-
translate()
方法:(位移) 根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù),從當(dāng)前元素位置移動(dòng)。
? 例:translate(50px,100px)
是從左邊元素移動(dòng)50個(gè)像素晴竞,并從頂部移動(dòng)100個(gè)像素。
-
rotate()
方法:(旋轉(zhuǎn))在一個(gè)給定度數(shù)順時(shí)針旋轉(zhuǎn)的元素狠半。負(fù)值是允許的颓鲜,這樣是元素逆時(shí)針旋轉(zhuǎn)。
? 例:rotate(30deg)
元素順時(shí)針旋轉(zhuǎn)30°
-
scale()
方法:(縮放)該元素增加或減少的大小典予,取決于寬度(X軸)和高度(Y軸)的參數(shù)甜滨。
? 例:scale(2,4)
轉(zhuǎn)變寬度為原來(lái)的大小的2倍,何其原始大小4倍的高度瘤袖。
-
skew()
方法:(扭曲)該元素會(huì)根據(jù)橫向(X軸)和垂直(Y軸)線參數(shù)給定角度衣摩。
? 例:skew(30deg,20deg)
元素在x軸和y軸上傾斜20°和30°
-
matrix()
方法:(矩陣)matrix
方法有六個(gè)參數(shù),包含旋轉(zhuǎn)捂敌,縮放艾扮,移動(dòng)和傾斜共功能。
? 例如:matrix(n,n,n,n,n,n)
使用六個(gè)值的矩陣占婉。
transform
:適用于2D和3D轉(zhuǎn)換的元素泡嘴。
transform-origin
:允許更改轉(zhuǎn)化元素的位置。
3D轉(zhuǎn)換方法:
1.rotateX()
方法:圍繞其在一個(gè)給定度數(shù)X軸旋轉(zhuǎn)的元素逆济。
2.rotateY()
方法:圍繞其在一個(gè)給定度數(shù)Y軸旋轉(zhuǎn)的元素酌予。
3.rotate3d(x,y,z.angle)
:定義3D轉(zhuǎn)換。
4.scale3d(x,y,z)
方法:定義3D縮放轉(zhuǎn)換奖慌。