translate
用于平移元素的工具类。
快速参考
| 类 | 属性 |
|---|---|
translate-<number> | translate: calc(var(--spacing) * <number>) calc(var(--spacing) * <number>); |
-translate-<number> | translate: calc(var(--spacing) * -<number>) calc(var(--spacing) * -<number>); |
translate-<fraction> | translate: calc(<fraction> * 100%) calc(<fraction> * 100%); |
-translate-<fraction> | translate: calc(<fraction> * -100%) calc(<fraction> * -100%); |
translate-full | translate: 100% 100%; |
-translate-full | translate: -100% -100%; |
translate-px | translate: 1px 1px; |
-translate-px | translate: -1px -1px; |
translate-(<custom-property>) | translate: var(<custom-property>) var(<custom-property>); |
translate-[<value>] | translate: <value> <value>; |
translate-x-<number> | translate: calc(var(--spacing) * <number>) var(--tw-translate-y); |
-translate-x-<number> | translate: calc(var(--spacing) * -<number>) var(--tw-translate-y); |
translate-x-<fraction> | translate: calc(<fraction> * 100%) var(--tw-translate-y); |
-translate-x-<fraction> | translate: calc(<fraction> * -100%) var(--tw-translate-y); |
translate-x-full | translate: 100% var(--tw-translate-y); |
-translate-x-full | translate: -100% var(--tw-translate-y); |
translate-x-px | translate: 1px var(--tw-translate-y); |
-translate-x-px | translate: -1px var(--tw-translate-y); |
translate-x-(<custom-property>) | translate: var(<custom-property>) var(--tw-translate-y); |
translate-x-[<value>] | translate: <value> var(--tw-translate-y); |
translate-y-<number> | translate: var(--tw-translate-x) calc(var(--spacing) * <number>); |
-translate-y-<number> | translate: var(--tw-translate-x) calc(var(--spacing) * -<number>); |
translate-y-<fraction> | translate: var(--tw-translate-x) calc(<fraction> * 100%); |
-translate-y-<fraction> | translate: var(--tw-translate-x) calc(<fraction> * -100%); |
translate-y-full | translate: var(--tw-translate-x) 100%; |
-translate-y-full | translate: var(--tw-translate-x) -100%; |
translate-y-px | translate: var(--tw-translate-x) 1px; |
-translate-y-px | translate: var(--tw-translate-x) -1px; |
translate-y-(<custom-property>) | translate: var(--tw-translate-x) var(<custom-property>); |
translate-y-[<value>] | translate: var(--tw-translate-x) <value>; |
translate-z-<number> | translate: var(--tw-translate-x) var(--tw-translate-y) calc(var(--spacing) * <number>); |
-translate-z-<number> | translate: var(--tw-translate-x) var(--tw-translate-y) calc(var(--spacing) * -<number>); |
translate-z-px | translate: var(--tw-translate-x) var(--tw-translate-y) 1px; |
-translate-z-px | translate: var(--tw-translate-x) var(--tw-translate-y) -1px; |
translate-z-(<custom-property>) | translate: var(--tw-translate-x) var(--tw-translate-y) var(<custom-property>); |
translate-z-[<value>] | translate: var(--tw-translate-x) var(--tw-translate-y) <value>; |
translate-none | translate: none; |
示例
使用间距比例
使用 translate-<number> 等工具类（如 translate-2 和 -translate-4）基于间距比例沿两个轴平移元素：
-translate-6
translate-2
translate-8
html
<!-- [!code classes:-translate-6,translate-2,translate-8] -->
<img class="-translate-6 ..." src="/img/mountains.jpg" />
<img class="translate-2 ..." src="/img/mountains.jpg" />
<img class="translate-8 ..." src="/img/mountains.jpg" />使用百分比
使用 translate-<fraction> 等工具类（如 translate-1/4 和 -translate-full）按元素尺寸的百分比沿两个轴平移元素：
-translate-1/4
translate-1/6
translate-1/2
html
<!-- [!code classes:-translate-1/4,translate-1/6,translate-1/2] -->
<img class="-translate-1/4 ..." src="/img/mountains.jpg" />
<img class="translate-1/6 ..." src="/img/mountains.jpg" />
<img class="translate-1/2 ..." src="/img/mountains.jpg" />沿 x 轴平移
使用 translate-x-<number> 或 translate-x-<fraction> 等工具类（如 translate-x-4 和 translate-x-1/4）沿 x 轴平移元素：
-translate-x-4
translate-x-2
translate-x-1/2
html
<!-- [!code classes:-translate-x-4,translate-x-2,translate-x-1/2] -->
<img class="-translate-x-4 ..." src="/img/mountains.jpg" />
<img class="translate-x-2 ..." src="/img/mountains.jpg" />
<img class="translate-x-1/2 ..." src="/img/mountains.jpg" />沿 y 轴平移
使用 translate-y-<number> 或 translate-y-<fraction> 等工具类（如 translate-y-6 和 translate-y-1/3）沿 y 轴平移元素：
-translate-y-4
translate-y-2
translate-y-1/2
html
<!-- [!code classes:-translate-y-4,translate-y-2,translate-y-1/2] -->
<img class="-translate-y-4 ..." src="/img/mountains.jpg" />
<img class="translate-y-2 ..." src="/img/mountains.jpg" />
<img class="translate-y-1/2 ..." src="/img/mountains.jpg" />沿 z 轴平移
使用 translate-z-<number> 等工具类（如 translate-z-6 和 -translate-z-12）沿 z 轴平移元素：
-translate-z-8
translate-z-4
translate-z-12
html
<!-- [!code classes:transform-3d,-translate-z-8,translate-z-2,translate-z-1/2] -->
<div class="transform-3d">
<img class="-translate-z-8 rotate-x-50 rotate-z-45 ..." src="/img/mountains.jpg" />
<img class="translate-z-2 rotate-x-50 rotate-z-45 ..." src="/img/mountains.jpg" />
<img class="translate-z-1/2 rotate-x-50 rotate-z-45 ..." src="/img/mountains.jpg" />
</div>注意，translate-z-<number> 工具类需要父元素应用 transform-3d 工具类。
使用自定义值
使用 translate-[<value>] 等工具类，根据完全自定义的值设置平移：
html
<img class="translate-[3.142rad] ..." />对于 CSS 变量，也可以使用 translate-(<custom-property>) 语法：
html
<img class="translate-(--my-translate) ..." />这只是 translate-[var(<custom-property>)] 的简写，会自动为你加上 var() 函数。
响应式设计
使用 md: 等断点变体作为 translate 工具类的前缀，即可仅在中等及以上屏幕尺寸下应用该工具类：
html
<img class="translate-45 md:translate-60 ..." />了解如何使用变体，请参阅变体文档。