变换
zoom
用于通过缩放调整元素大小的工具。
| 类 | 样式 |
|---|---|
zoom-<number> | zoom: <number>%; |
zoom-(<custom-property>) | zoom: var(<custom-property>); |
zoom-[<value>] | zoom: <value>; |
示例(Examples)
基本示例(Basic example)
使用 zoom-<number> 工具，如 zoom-75 和 zoom-125，通过 CSS zoom 属性来缩放元素：
🌐 Use zoom-<number> utilities like zoom-75 and zoom-125 to scale an element using the CSS zoom property:
<div class="zoom-75 ..."> <!-- ... --></div><div class="zoom-100 ..."> <!-- ... --></div><div class="zoom-125 ..."> <!-- ... --></div>使用自定义值(Using a custom value)
使用 zoom-[<value>] 语法 根据完全自定义的值设置 zoom：
<div class="zoom-[1.1] ..."> <!-- ... --></div>对于 CSS 变量，还可以使用 zoom-(<custom-property>) 语法：
<div class="zoom-(--my-zoom) ..."> <!-- ... --></div>这只是简写，用于 zoom-[var(<custom-property>)] 它会自动为你添加 var() 函数。
悬停时应用(Applying on hover)
在 zoom 工具前面加上一个变体，例如 hover:*，以便仅在该状态下应用该工具：
<div class="zoom-100 hover:zoom-125 ..."> <!-- ... --></div>请参阅 变体文档 详细了解如何使用变体。
响应式设计(Responsive design)
在 zoom 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<div class="zoom-100 md:zoom-125 ..."> <!-- ... --></div>请参阅 变体文档 详细了解如何使用变体。