2D和3D轉(zhuǎn)換心得

轉(zhuǎn)換

定義:改變位置、形狀、尺寸{2D(XY軸)和3D(XYZ軸)}

2D:平面轉(zhuǎn)換:平移(move)、傾斜(skew)、旋轉(zhuǎn)(rotate)、縮放(scale)

3D:空間轉(zhuǎn)換

屬性:transform {2D、3D轉(zhuǎn)換}

none{默認(rèn)值不進(jìn)行轉(zhuǎn)換}

transform-function{平移縮放旋轉(zhuǎn)傾斜的方式}

transform:rotate(45deg)

正值是順時(shí)針,負(fù)值是逆時(shí)針

transform:skew(45deg)

負(fù)值是向右,正值反之,

transform:scale(0-1縮小,>1位放大)

transform:scale

(x,y)/scaleX/Y

transform-origin{默認(rèn)情況:變形的中心點(diǎn)是元素的中心點(diǎn);

寫法

}

transform-style:作用:是頁面以2D3D顯示

Fiat:默認(rèn)2D

preserve-3D:元素在3D空間展示;

特點(diǎn):必須在父類元素中設(shè)置:preserve-3D;不然無法顯示3D效果。

最后編輯于
?著作權(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),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

  • 看了很多視頻、文章,最后卻通通忘記了,別人的知識(shí)依舊是別人的,自己卻什么都沒獲得。此系列文章旨在加深自己的印象,因...
    DCbryant閱讀 1,963評(píng)論 0 4
  • 關(guān)于css3變形 CSS3變形是一些效果的集合,比如平移、旋轉(zhuǎn)、縮放和傾斜效果,每個(gè)效果都被稱作為變形函數(shù)(Tra...
    hopevow閱讀 6,564評(píng)論 2 13
  • CSS里transform變形這個(gè)屬性有點(diǎn)學(xué)習(xí)難度,尤其在CSS3里加上了3D效果之后,2維變3維學(xué)習(xí)成本更是成倍...
    張歆琳閱讀 28,363評(píng)論 5 81
  • Transform字面上就是變形,改變的意思。在CSS3中transform主要包括以下幾種:旋轉(zhuǎn)rotate、扭...
    hzrWeber閱讀 22,253評(píng)論 0 19
  • 灰灰有一把會(huì)哭的雨傘,雨傘在雨天笑,晴天里哭
    智商低不解釋閱讀 159評(píng)論 0 0

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