CSS中2D,3D的轉(zhuǎn)換


通過CSS3轉(zhuǎn)換,對元素進(jìn)行移動,縮放,轉(zhuǎn)動,拉長或拉伸。轉(zhuǎn)換是使元素改變形狀,尺寸和位置的一種效果。可以用2D,3D來轉(zhuǎn)換元素。

2D轉(zhuǎn)換法


首先我們寫出一個(gè)初始的效果代碼


  • translate()

效果示例:


translate
  • rotate()

效果示例:


rotate
  • scale()

效果示例:


scale
  • skew()

效果示例:


skew
  • matrix()

以上的效果都通過如圖示例的CSS樣式來改變的

css代碼示例

3D轉(zhuǎn)換法

  • rotate X()
  • rotate Y()
    CSS代碼示例:


    x與Y都是同樣的
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

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

  • 看了很多視頻、文章,最后卻通通忘記了,別人的知識依舊是別人的,自己卻什么都沒獲得。此系列文章旨在加深自己的印象,因...
    DCbryant閱讀 1,972評論 0 4
  • 關(guān)于css3變形 CSS3變形是一些效果的集合,比如平移、旋轉(zhuǎn)、縮放和傾斜效果,每個(gè)效果都被稱作為變形函數(shù)(Tra...
    hopevow閱讀 6,569評論 2 13
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    love2013閱讀 2,438評論 0 11
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    wzhiq896閱讀 2,119評論 0 2
  • 1、屬性選擇器:id選擇器 # 通過id 來選擇類名選擇器 . 通過類名來選擇屬性選擇器 ...
    Yuann閱讀 1,753評論 0 7

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