css3系列之transform 詳解scale

scale()
  scaleX()
  scaleY()
  scaleZ()
  scale3d()

改變的不是元素的寬高眶拉,而是 X 和 Y 軸的刻度

本章有個(gè)很冷門的知識(shí)點(diǎn) → scale 和 rotate 一起使用

——————————————————————————————————————

scaleX()

****scaleY()****

縮放該元素,>1 放大, <1 縮小 默認(rèn)值是 1;

image

看了上面的圖,你可能會(huì)覺得,好像是100px 變成了200px 但是實(shí)際上,并不是岩榆。變的不是 元素的 寬高。

image

其實(shí)坟瓢,他改變的不是元素的寬高勇边,而是x 和 y 軸的刻度 ↓

image

scale()

這個(gè)呢,是上面兩個(gè)的合體折联,也就是 參數(shù) 第一個(gè)是x 第二個(gè)是y

image
image

scale3d()

第一個(gè)參數(shù)是 x 第二個(gè)參數(shù)是y 第三個(gè)參數(shù)是z 粒褒,也就是scalex scaley scalez 的結(jié)合體。

scalez吧诚镰,這個(gè)值原本就是3D的奕坟,所以可能會(huì)有點(diǎn)難理解, 像上面這個(gè)圖清笨, 本來就是2D 的圖月杉,你再怎么拉伸他的Z 軸,也是看不出效果的抠艾。前提是你的圖苛萎,是3D的才能拉伸,2D的是拉伸不了的。 如果有不知道Z軸在哪里的朋友腌歉,請(qǐng)點(diǎn)這里→ rotateZ

探索:

首先蛙酪,我們來思考一個(gè)問題,使用 rotate進(jìn)行旋轉(zhuǎn)究履,那么 X 和 Y 軸是會(huì)跟著旋轉(zhuǎn)而變化的,那么這個(gè)時(shí)候加上 scaleX 和 Y脸狸,那么旋轉(zhuǎn)的過程中最仑,會(huì)不會(huì)帶上scale 的效果?

先來觀察一下炊甲, 先rotate 再 scale 的效果:

image

看完上面的圖泥彤,是不是覺得,旋轉(zhuǎn)的時(shí)候卿啡,會(huì)帶著scale的效果一起旋轉(zhuǎn)吟吝。 但是! 如果把他倆位置換了颈娜,那結(jié)果是截然不同的剑逃,先scale 再 rotate

image

對(duì)比兩張圖,你就會(huì)發(fā)現(xiàn)官辽,第一張的效果蛹磺,確實(shí)是帶上了scale的效果一起旋轉(zhuǎn)的,怎么 換了個(gè)位置同仆,就不一樣呢萤捆?

其實(shí)呢,先rotate俗批,再scale(先旋轉(zhuǎn)俗或,后縮放) 是會(huì)把效果帶上旋轉(zhuǎn)的,但是 先scale 再rotate(先縮放岁忘,后旋轉(zhuǎn)) 是不會(huì)把縮放的效果帶上旋轉(zhuǎn)的辛慰,縮放的效果,會(huì)留在原地干像,等你經(jīng)過的時(shí)候昆雀,就會(huì)生效◎鹬看下面的圖解狞膘,縮放的比例,會(huì)留在原地什乙,經(jīng)過的時(shí)候挽封,就會(huì)恢復(fù)比例。

image
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末臣镣,一起剝皮案震驚了整個(gè)濱河市辅愿,隨后出現(xiàn)的幾起案子智亮,更是在濱河造成了極大的恐慌,老刑警劉巖点待,帶你破解...
    沈念sama閱讀 207,113評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件阔蛉,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡癞埠,警方通過查閱死者的電腦和手機(jī)状原,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評(píng)論 2 381
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來苗踪,“玉大人颠区,你說我怎么就攤上這事⊥ú” “怎么了毕莱?”我有些...
    開封第一講書人閱讀 153,340評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)颅夺。 經(jīng)常有香客問我朋截,道長(zhǎng),這世上最難降的妖魔是什么吧黄? 我笑而不...
    開封第一講書人閱讀 55,449評(píng)論 1 279
  • 正文 為了忘掉前任质和,我火速辦了婚禮,結(jié)果婚禮上稚字,老公的妹妹穿的比我還像新娘饲宿。我一直安慰自己,他們只是感情好胆描,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,445評(píng)論 5 374
  • 文/花漫 我一把揭開白布瘫想。 她就那樣靜靜地躺著,像睡著了一般昌讲。 火紅的嫁衣襯著肌膚如雪国夜。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,166評(píng)論 1 284
  • 那天短绸,我揣著相機(jī)與錄音车吹,去河邊找鬼。 笑死醋闭,一個(gè)胖子當(dāng)著我的面吹牛窄驹,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播证逻,決...
    沈念sama閱讀 38,442評(píng)論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼乐埠,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起丈咐,我...
    開封第一講書人閱讀 37,105評(píng)論 0 261
  • 序言:老撾萬榮一對(duì)情侶失蹤瑞眼,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后棵逊,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體伤疙,經(jīng)...
    沈念sama閱讀 43,601評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,066評(píng)論 2 325
  • 正文 我和宋清朗相戀三年辆影,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了徒像。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,161評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡秸歧,死狀恐怖厨姚,靈堂內(nèi)的尸體忽然破棺而出衅澈,到底是詐尸還是另有隱情键菱,我是刑警寧澤,帶...
    沈念sama閱讀 33,792評(píng)論 4 323
  • 正文 年R本政府宣布今布,位于F島的核電站经备,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏部默。R本人自食惡果不足惜侵蒙,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,351評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望傅蹂。 院中可真熱鬧纷闺,春花似錦、人聲如沸份蝴。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽婚夫。三九已至浸卦,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間案糙,已是汗流浹背限嫌。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評(píng)論 1 261
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留时捌,地道東北人怒医。 一個(gè)月前我還...
    沈念sama閱讀 45,618評(píng)論 2 355
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像奢讨,于是被迫代替她去往敵國(guó)和親裆熙。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,916評(píng)論 2 344

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

  • 第一部分:變形介紹 自層疊樣式表誕生以來,元素始終是矩形的入录,而且只能沿著橫軸和縱軸放置蛤奥。有些技巧能讓元素看起來是傾...
    俠客有情劍無情QAQ閱讀 1,468評(píng)論 0 17
  • Transforrm屬性是控制2D或者3D元素的縮放,傾斜僚稿,移動(dòng)凡桥,旋轉(zhuǎn) 上面代碼復(fù)制到html文件你大概會(huì)明白tr...
    九歌1閱讀 1,003評(píng)論 0 0
  • 關(guān)于css3變形 CSS3變形是一些效果的集合,比如平移蚀同、旋轉(zhuǎn)缅刽、縮放和傾斜效果,每個(gè)效果都被稱作為變形函數(shù)(Tra...
    hopevow閱讀 6,317評(píng)論 2 13
  • CSS3中動(dòng)畫涉及到三個(gè)屬性蠢络,一個(gè)是Transform:變形衰猛;一個(gè)是Transition:過渡,一個(gè)是Animat...
    荷小音閱讀 1,223評(píng)論 0 5
  • CSS里transform變形這個(gè)屬性有點(diǎn)學(xué)習(xí)難度刹孔,尤其在CSS3里加上了3D效果之后啡省,2維變3維學(xué)習(xí)成本更是成倍...
    張歆琳閱讀 27,702評(píng)論 5 81