CSS3中2D和3D的轉(zhuǎn)換

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)換。


transform-style:規(guī)定被嵌套元素如何在3D空間中顯示。
perspective:規(guī)定3D元素的透視效果。
perspective-origin:規(guī)定3D元素的底部位置。
backface-visibility :定義元素在不面對(duì)屏幕時(shí)是否可見。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容