变换

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>%;

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

使用 scale-<number> 工具(如 scale-75scale-150)按元素原始大小的百分比缩放元素:

¥Use scale-<number> utilities like scale-75 and scale-150 to scale an element by a percentage of its original size:

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)

¥Scaling on the x-axis

使用 scale-x-<number> 工具(如 scale-x-75-scale-x-150)在 x 轴上按元素原始宽度的百分比缩放元素:

¥Use the scale-x-<number> utilities like scale-x-75 and -scale-x-150 to scale an element on the x-axis by a percentage of its original width:

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)

¥Scaling on the y-axis

使用 scale-y-<number> 工具(如 scale-y-75-scale-y-150)在 y 轴上按元素原始高度的百分比缩放元素:

¥Use the scale-y-<number> utilities like scale-y-75 and -scale-y-150 to scale an element on the y-axis by a percentage of its original height:

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)

¥Using negative values

使用 -scale-<number>-scale-x-<number>-scale-y-<number> 工具(如 -scale-x-75-scale-125)镜像并缩小元素原始大小的百分比:

¥Use -scale-<number>, -scale-x-<number> or -scale-y-<number> utilities like -scale-x-75 and -scale-125 to mirror and scale down an element by a percentage of its original size:

-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)

¥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)

¥Applying on hover

scale 工具前面加上一个变体,例如 hover:*,以便仅在该状态下应用该工具:

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

请参阅 变体文档 详细了解如何使用变体。

TailwindCSS v4.0 中文网 - 粤ICP备13048890号