scale()
scaleX()
scaleY()
scaleZ()
scale3d()
本章有個(gè)很冷門的知識(shí)點(diǎn) → scale 和 rotate 一起使用
——————————————————————————————————————
scaleX()
****scaleY()****
縮放該元素,>1 放大, <1 縮小 默認(rèn)值是 1;
看了上面的圖,你可能會(huì)覺得,好像是100px 變成了200px 但是實(shí)際上,并不是岩榆。變的不是 元素的 寬高。
其實(shí)坟瓢,他改變的不是元素的寬高勇边,而是x 和 y 軸的刻度 ↓
scale()
這個(gè)呢,是上面兩個(gè)的合體折联,也就是 參數(shù) 第一個(gè)是x 第二個(gè)是y
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 的效果:
看完上面的圖泥彤,是不是覺得,旋轉(zhuǎn)的時(shí)候卿啡,會(huì)帶著scale的效果一起旋轉(zhuǎn)吟吝。 但是! 如果把他倆位置換了颈娜,那結(jié)果是截然不同的剑逃,先scale 再 rotate
對(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ù)比例。