1. 变换
  2. translate

变换

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-<number> 实用程序,如 translate-2-translate-4,根据间距比例在两个轴上平移元素

-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

<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-4translate-x-1/4,在 x 轴上平移元素

-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-6translate-y-1/3,在 y 轴上平移元素

-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

<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>] 语法 设置平移基于完全自定义的值

<img class="translate-[3.142rad] ..." src="/img/mountains.jpg" />

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

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

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

响应式设计

前缀一个 translate 实用程序 带有断点变体,如 md:,仅在中等 屏幕尺寸及以上应用该实用程序

<img class="translate-45 md:translate-60 ..." src="/img/mountains.jpg" />

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

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