scale
用于缩放元素的工具类。
快速参考
| 类 | 属性 |
|---|---|
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> 等工具类（如 scale-75 和 scale-150）按原始尺寸的百分比缩放元素：
scale-75
scale-100
scale-125
html
<!-- [!code classes: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> 等工具类（如 scale-x-75 和 -scale-x-150）按原始宽度的百分比沿 x 轴缩放元素：
scale-x-75
scale-x-100
scale-x-125
html
<!-- [!code classes: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> 等工具类（如 scale-y-75 和 scale-y-150）按原始高度的百分比沿 y 轴缩放元素：
scale-y-75
scale-y-100
scale-y-125
html
<!-- [!code classes: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> 等工具类（如 -scale-x-75 和 -scale-125）按原始尺寸的百分比镜像并缩小元素：
-scale-x-75
-scale-100
-scale-y-125
html
<!-- [!code classes:-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>] 等工具类，根据完全自定义的值设置缩放：
html
<img class="scale-[1.7] ..." />对于 CSS 变量，也可以使用 scale-(<custom-property>) 语法：
html
<img class="scale-(--my-scale) ..." />这只是 scale-[var(<custom-property>)] 的简写，会自动为你加上 var() 函数。
在悬停时应用
使用 hover:* 等变体作为 scale 工具类的前缀，即可仅在该状态下应用该工具类：
html
<img class="scale-95 hover:scale-120 ..." />了解如何使用变体，请参阅变体文档。