1. 转换
  2. 缩放

转换

缩放

用于缩放元素的实用工具。

样式
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-<number> 实用程序,如 scale-75scale-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> 实用程序,如 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> 实用程序,如 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> 实用程序,如 -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" />

使用自定义值

使用 缩放-[<value>] 语法 设置缩放基于完全自定义的值

<img class="scale-[1.7] ..." src="/img/mountains.jpg" />

对于 CSS 变量,您还可以使用 缩放-(<custom-property>) 语法

<img class="scale-(--my-scale) ..." src="/img/mountains.jpg" />

这只是 缩放-[var(<custom-property>)] 的简写,它会自动为您添加 var() 函数。

在悬停时应用

前缀一个 带有变体的 scale 实用程序,例如 hover:* 仅在该状态下应用该实用程序

<img class="scale-95 hover:scale-120 ..." src="/img/mountains.jpg" />

了解有关在变体文档中使用变体的更多信息。

版权所有 © 2025 Tailwind Labs Inc.·商标政策