- Transforms
- scale
Transforms
scale
用於縮放元素的通用類別。
| 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); |
範例（Examples）
基本範例（Basic example）
使用 scale-75 和 scale-150 等 scale-<number> 通用類別來按原始大小的百分比縮放元素：
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 軸縮放（Scaling on the x-axis）
使用 scale-x-75 和 -scale-x-150 等 scale-x-<number> 通用類別來按原始寬度的百分比沿 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 軸縮放（Scaling on the y-axis）
使用 scale-y-75 和 scale-y-150 等 scale-y-<number> 通用類別來按原始高度的百分比沿 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" />使用負值（Using negative values）
使用 -scale-x-75 和 -scale-125 等 -scale-<number>、-scale-x-<number> 或 -scale-y-<number> 通用類別來鏡像並按原始大小的百分比縮小元素：
-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" />使用自訂值（Using a custom value）
使用 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() 函式。
在懸停時套用（Applying on hover）
在 scale 通用類別前面加上像 hover:* 這樣的變體，讓該通用類別只在該狀態下套用：
<img class="scale-95 hover:scale-120 ..." src="/img/mountains.jpg" />在變體文件中了解更多關於使用變體的資訊。