變形
scale（縮放）
用於縮放元素的 Utilities。
| Class | Styles |
|---|---|
scale-none | scale: none; |
scale-<number> | scale: <number>% <number>%; |
-scale-<number> | scale: calc(<number>% * -1) calc(<number>% * -1); |
scale-(<custom-property>) | scale: var(<custom-property>) var(<custom-property>); |
scale-[<value>] | scale: <value>; |
scale-x-<number> | scale: <number>% var(--tw-scale-y); |
-scale-x-<number> | scale: calc(<number>% * -1) var(--tw-scale-y); |
scale-x-(<custom-property>) | scale: var(<custom-property>) var(--tw-scale-y); |
scale-x-[<value>] | scale: <value> var(--tw-scale-y); |
scale-y-<number> | scale: var(--tw-scale-x) <number>%; |
-scale-y-<number> | scale: var(--tw-scale-x) calc(<number>% * -1); |
scale-y-(<custom-property>) | scale: var(--tw-scale-x) var(<custom-property>); |
scale-y-[<value>] | scale: var(--tw-scale-x) <value>; |
scale-z-<number> | scale: var(--tw-scale-x) var(--tw-scale-y) <number>%; |
-scale-z-<number> | scale: var(--tw-scale-x) var(--tw-scale-y) calc(<number>% * -1); |
scale-z-(<custom-property>) | scale: var(--tw-scale-x) var(--tw-scale-y) var(<custom-property>); |
scale-z-[<value>] | scale: var(--tw-scale-x) var(--tw-scale-y) <value>; |
scale-3d | scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z); |
範例
基本範例
使用 scale-<number> utilities，例如 scale-75 和 scale-150，將元素縮放為其原始大小的百分比
scale-75
scale-100
scale-125
<img class="scale-75 ..." src="/img/mountains.jpg" /><img class="scale-100 ..." src="/img/mountains.jpg" /><img class="scale-125 ..." src="/img/mountains.jpg" />在 X 軸上縮放
使用 scale-x-<number> utilities，例如 scale-x-75 和 -scale-x-150，將元素在 X 軸上縮放為其原始寬度的百分比
scale-x-75
scale-x-100
scale-x-125
<img class="scale-x-75 ..." src="/img/mountains.jpg" /><img class="scale-x-100 ..." src="/img/mountains.jpg" /><img class="scale-x-125 ..." src="/img/mountains.jpg" />在 Y 軸上縮放
使用 scale-y-<number> utilities，例如 scale-y-75 和 -scale-y-150，將元素在 Y 軸上縮放為其原始高度的百分比
scale-y-75
scale-y-100
scale-y-125
<img class="scale-y-75 ..." src="/img/mountains.jpg" /><img class="scale-y-100 ..." src="/img/mountains.jpg" /><img class="scale-y-125 ..." src="/img/mountains.jpg" />使用負值
使用類似 -scale-<number>、-scale-x-<number> 和 -scale-y-<number> 的工具類別 (utilities)，例如 -scale-x-75 和 -scale-125，以鏡像和按原始尺寸的百分比縮小元素
-scale-x-75
-scale-100
-scale-y-125
<img class="-scale-x-75 ..." src="/img/mountains.jpg" /><img class="-scale-100 ..." src="/img/mountains.jpg" /><img class="-scale-y-125 ..." src="/img/mountains.jpg" />使用自定義值
使用 scale（縮放）-[<value>] 語法 來設定scale（縮放）基於完全自定義的值
<img class="scale-[1.7] ..." src="/img/mountains.jpg" />對於 CSS 變數，您也可以使用 scale（縮放）-(<custom-property>) 語法
<img class="scale-(--my-scale) ..." src="/img/mountains.jpg" />這只是 scale（縮放）-[var(<custom-property>)] 的簡寫，它會自動為您添加 var() 函數。
懸停時套用
前綴a scale 工具類別 (utility) 並使用變體 (variant)，例如 hover:*，以僅在該狀態下套用該工具類別 (utility)
<img class="scale-95 hover:scale-120 ..." src="/img/mountains.jpg" />在變體 (variants) 文件中了解更多關於使用變體 (variants) 的資訊。
