css3系列之transform 詳解scale

2022-06-09 15:54:28 字數 1695 閱讀 6561

scale()

scalex()

scaley()

scalez()

scale3d()

改變的不是元素的寬高,而是 x 和 y 軸的刻度

本章有個很冷門的知識點 → scale 和 rotate 一起使用

scalex()

scaley()

縮放該元素,>1 放大, <1 縮小  預設值是 1;

看了上面的圖,你可能會覺得,好像是100px  變成了200px   但是實際上,並不是。變的不是 元素的 寬高。

其實,他改變的不是元素的寬高,而是x 和 y 軸的刻度 ↓ 

這個呢,是上面兩個的合體,也就是 引數 第乙個是x 第二個是y

第乙個引數是 x  第二個引數是y  第三個引數是z ,也就是scalex scaley scalez 的結合體。

scalez吧,這個值原本就是3d的,所以可能會有點難理解, 像上面這個圖, 本來就是2d 的圖,你再怎麼拉伸他的z 軸,也是看不出效果的。前提是你的圖,是3d的才能拉伸,2d的是拉伸不了的。  如果有不知道z軸在**的朋友,請點這裡→ rotatez

探索:

首先,我們來思考乙個問題,使用 rotate進行旋轉,那麼 x 和 y 軸是會跟著旋轉而變化的,那麼這個時候加上 scalex  和 y,那麼旋轉的過程中,會不會帶上scale 的效果?

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

看完上面的圖,是不是覺得,旋轉的時候,會帶著scale的效果一起旋轉。 但是!  如果把他倆位置換了,那結果是截然不同的,先scale 再 rotate

對比兩張圖,你就會發現,第一張的效果,確實是帶上了scale的效果一起旋轉的,怎麼 換了個位置,就不一樣呢?

其實呢,先rotate,再scale(先旋轉,後縮放) 是會把效果帶上旋轉的,但是  先scale 再rotate(先縮放,後旋轉) 是不會把縮放的效果帶上旋轉的,縮放的效果,會留在原地,等你經過的時候,就會生效。看下面的**,縮放的比例,會留在原地,經過的時候,就會恢復比例。

WEB之CSS3系列筆記

選擇符 簡介e att 選擇具有att屬性的e元素 e att val 選擇具有att屬性且屬性值為val的e元素 e att val 匹配具有att屬性,且值以val開頭的e元素 e att val 匹配具有att屬性,且值以val借位的e元素 e att val 匹配具有att屬性,且值中含有v...

css3系列 概述

css3分成了不同類別,稱為 modules 而每乙個 modules 都有於css2中額外增加的功能,以及向後相容。css3早於1999年已經開始制訂。18 直到2011年6月7日,css 3 color module終於發布為w3c recommendation。19 css3裡增加了不少功能,...

css3動畫系列之 keyframes規則

keyframes 規則用於建立動畫。在 keyframes 中規定某項 css 樣式,就能建立由當前樣式逐漸改為新樣式的動畫效果。css div 常見動畫規則case為背景色由紅色變為藍色 webkit keyframes caseto 將以上css 加入到頁面中就可以看到效果啦o o 注 key...