2019-05-22 transform轉(zhuǎn)換

變形(transform)屬性-2D

讓元素在一個(gè)坐標(biāo)系統(tǒng)中變形醉者。這個(gè)屬性可以移動(dòng)皂岔、旋轉(zhuǎn)和縮放元素晶府。

transform:none | <transform-function>[<transform-function>]*;

默認(rèn)是:

transform:none;

rotate()旋轉(zhuǎn)

指定角度參數(shù)對(duì)原元素指定2D旋轉(zhuǎn)

transform:rotate(<angle>);

例:transform: rotate(-45deg);逆時(shí)針旋轉(zhuǎn)45度
angle為正數(shù)代表順時(shí)針旋轉(zhuǎn)椒袍,負(fù)數(shù)是逆時(shí)針坛吁。

translate()平移

從當(dāng)前位置向x軸或y軸移動(dòng)摩幔。

translateX(x)

水平移動(dòng)彤委,從左到右為正

translateY(y)

垂直移動(dòng),從上到下為正

translate(x或衡,y)

水平垂直移動(dòng)

scale()縮放

scaleX(x)

水平縮放焦影,中心點(diǎn),取值為百分比

scaleY(y)

豎直縮放

scale(x,y)

縮放封断,如果就填一個(gè)數(shù)斯辰,那么是等比例放大縮小

skew()扭曲或斜切

skewX

(正值:逆時(shí)針)x軸斜切

skewY

(正值:順時(shí)針)y軸斜切

skew(x,y)

如果y沒(méi)填只有x,就默認(rèn)y為0

3D變換

rotate3D()

transform:rotateX(<angle>);//X軸旋轉(zhuǎn)的角度
transform:rotateY(<angle>);//Y軸旋轉(zhuǎn)的角度
transform:rotateZ(<angle>);//Z軸旋轉(zhuǎn)的角度
transform:rotate(x,y,z,<angle>);//Z軸旋轉(zhuǎn)的角度

理解:正面看體操運(yùn)動(dòng)員玩單杠

translate3D()

translateZ(z)//z軸平移
transform:translate3d(x,y,z)//從當(dāng)前位置向z軸移動(dòng)坡疼。

scale3D()

transform:scaleZ(z)//z軸縮放
transform:scale3d(x,y,z)//從當(dāng)前3d縮放彬呻。

坐標(biāo)原心

transform-origin:25% top;

矩陣

transform:matrix(a,b,c,d,tx,ty);

指定嵌套元素是怎樣的三維空間

transform-style:flat|preserve-3d;

perspective屬性

指定觀察者與「z=0」平面的距離,使具有三維位置變換的元素產(chǎn)生透視效果。
perspective屬性指定了觀察者與z=0平面的距離闸氮,使具有三維位置變換的元素產(chǎn)生透視效果剪况。z>0的三維元素比正常大,而z<0時(shí)則比正常小蒲跨,大小程度由該屬性的值決定译断。
三維元素在觀察者后面的部分不會(huì)繪制出來(lái),即z軸坐標(biāo)值大于perspective屬性值的部分或悲。
屬性值為0或負(fù)值或none(none是默認(rèn)值)時(shí)孙咪,沒(méi)有透視效果

perspective:number|none;

perspective-origin屬性

指定透視點(diǎn)的位置。

perspective-origin:x-axisy-axis;
perspective-origin:50%50%;//默認(rèn)值

backface-visibility

指定元素背面面向用戶時(shí)是否可見(jiàn)

backface-visibility:visible|hidden;

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末隆箩,一起剝皮案震驚了整個(gè)濱河市该贾,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌捌臊,老刑警劉巖杨蛋,帶你破解...
    沈念sama閱讀 221,548評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異理澎,居然都是意外死亡逞力,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,497評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門糠爬,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)寇荧,“玉大人,你說(shuō)我怎么就攤上這事执隧】眨” “怎么了?”我有些...
    開(kāi)封第一講書人閱讀 167,990評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵镀琉,是天一觀的道長(zhǎng)峦嗤。 經(jīng)常有香客問(wèn)我,道長(zhǎng)屋摔,這世上最難降的妖魔是什么烁设? 我笑而不...
    開(kāi)封第一講書人閱讀 59,618評(píng)論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮钓试,結(jié)果婚禮上装黑,老公的妹妹穿的比我還像新娘。我一直安慰自己弓熏,他們只是感情好恋谭,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,618評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著硝烂,像睡著了一般箕别。 火紅的嫁衣襯著肌膚如雪铜幽。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書人閱讀 52,246評(píng)論 1 308
  • 那天串稀,我揣著相機(jī)與錄音除抛,去河邊找鬼。 笑死母截,一個(gè)胖子當(dāng)著我的面吹牛到忽,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播清寇,決...
    沈念sama閱讀 40,819評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼喘漏,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了华烟?” 一聲冷哼從身側(cè)響起翩迈,我...
    開(kāi)封第一講書人閱讀 39,725評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎盔夜,沒(méi)想到半個(gè)月后负饲,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,268評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡喂链,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,356評(píng)論 3 340
  • 正文 我和宋清朗相戀三年返十,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片椭微。...
    茶點(diǎn)故事閱讀 40,488評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡洞坑,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出蝇率,到底是詐尸還是另有隱情迟杂,我是刑警寧澤,帶...
    沈念sama閱讀 36,181評(píng)論 5 350
  • 正文 年R本政府宣布本慕,位于F島的核電站逢慌,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏间狂。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,862評(píng)論 3 333
  • 文/蒙蒙 一火架、第九天 我趴在偏房一處隱蔽的房頂上張望鉴象。 院中可真熱鬧,春花似錦何鸡、人聲如沸纺弊。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 32,331評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)淆游。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間犹菱,已是汗流浹背拾稳。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,445評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留腊脱,地道東北人访得。 一個(gè)月前我還...
    沈念sama閱讀 48,897評(píng)論 3 376
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像陕凹,于是被迫代替她去往敵國(guó)和親悍抑。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,500評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容

  • CSS里transform變形這個(gè)屬性有點(diǎn)學(xué)習(xí)難度杜耙,尤其在CSS3里加上了3D效果之后搜骡,2維變3維學(xué)習(xí)成本更是成倍...
    BULL_DEBUG閱讀 879評(píng)論 0 1
  • CSS里transform變形這個(gè)屬性有點(diǎn)學(xué)習(xí)難度,尤其在CSS3里加上了3D效果之后佑女,2維變3維學(xué)習(xí)成本更是成倍...
    張歆琳閱讀 27,879評(píng)論 5 81
  • 在介紹有關(guān)transform相關(guān)的知識(shí)之前记靡,先來(lái)講一下transform-origin的用法以及關(guān)于角度的幾種取值...
    跪鍵盤的小泰迪閱讀 1,241評(píng)論 0 2
  • 1 CALayer IOS SDK詳解之CALayer(一) http://doc.okbase.net/Hell...
    Kevin_Junbaozi閱讀 5,155評(píng)論 3 23
  • 看了很多視頻、文章珊豹,最后卻通通忘記了簸呈,別人的知識(shí)依舊是別人的,自己卻什么都沒(méi)獲得店茶。此系列文章旨在加深自己的印象蜕便,因...
    DCbryant閱讀 1,866評(píng)論 0 4