2D旋轉(zhuǎn)transform有以下幾個(gè)屬性：
- translate(x軸,y軸)---根據(jù)x和y軸位置給定的參數(shù)黔宛，從當(dāng)前位置移動(dòng)
- rotate(30deg)---表示該元素順時(shí)針旋轉(zhuǎn)30度冗恨，可以是負(fù)數(shù)，這樣就是逆時(shí)旋轉(zhuǎn)
- scale(原寬的倍數(shù)，原高度的倍數(shù))---該元素增加或減少的大小港庄，取決于寬度和高度的參數(shù)
- skew(x軸水平方向傾斜甸祭，y軸垂直方向傾斜)---包含兩個(gè)參數(shù)，分別時(shí)表示x軸和y軸傾斜的角度善已，如果第二個(gè)參數(shù)為空灼捂，則默認(rèn)為0，參數(shù)為負(fù)數(shù)表示向相反方向傾斜
- matrix()---該方法有六個(gè)參數(shù)换团，包含旋轉(zhuǎn)悉稠，縮放，移動(dòng)（平移）和傾斜功能
該圖作為所以2D轉(zhuǎn)化得最初始效果
image.png
translate
translate(X,Y)
translateX(n)
translateY(n)
水平方向移動(dòng)50px,垂直方向移動(dòng)50px
image.png
transform: translate(50px,50px);
rotate
- 正數(shù)就是順時(shí)針旋轉(zhuǎn)艘包，負(fù)數(shù)就是逆時(shí)針旋轉(zhuǎn)
順時(shí)針旋轉(zhuǎn)60度
image.png
transform: rotate(60deg);
逆時(shí)針旋轉(zhuǎn)30度
image.png
scale
scaleX(n)
scaleY(n)
內(nèi)容會(huì)被壓縮
如果參數(shù)輸入的是負(fù)數(shù)的猛，方向就會(huì)相反
寬度擴(kuò)大2倍耀盗，高度縮小0.5倍
image.png
transform: scale(2,0.5);
輸入負(fù)數(shù)的x軸和y軸
image.png
image.png
image.png
skew
skew(x,y)
skewX(n)
skewY(n)
水平方向和垂直方向的傾斜超過(guò)等于60度就看不到元素了
輸入的是負(fù)數(shù)，說(shuō)明的逆時(shí)針傾斜了
水平方向傾斜30度卦尊，垂直方向傾斜30度
image.png
transform: skew(30deg,30deg);
matrix
- 接收六個(gè)參數(shù)：旋轉(zhuǎn)叛拷，縮放，平移岂却，傾斜
image.png
transform: matrix(0.866,0.5,-0.5,0.866,0,0);
