变换
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); |
示例(Examples)
¥Examples
基本示例(Basic example)
¥Basic example
使用 scale-<number>
工具(如 scale-75
和 scale-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" />
请参阅 变体文档 详细了解如何使用变体。