translate

示例(Examples)

¥Examples

使用间距比例(Using the spacing scale)

¥Using the spacing scale

使用 translate-<number> 工具（如 translate-2 和 -translate-4）根据间距比例在两个轴上平移元素：

¥Use translate-<number> utilities like translate-2 and -translate-4 to translate an element on both axes based on the spacing scale:

-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" />

使用百分比(Using a percentage)

¥Using a percentage

使用 translate-<fraction> 工具（如 translate-1/4 和 -translate-full）平移按元素大小的百分比在两个轴上平移元素：

¥Use translate-<fraction> utilities like translate-1/4 and -translate-full to translate an element on both axes by a percentage of the element's size:

-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 轴上平移(Translating on the x-axis)

¥Translating on the x-axis

使用 translate-x-<number> 或 translate-x-<fraction> 工具（如 translate-x-4 和 translate-x-1/4）平移元素 x 轴：

¥Use translate-x-<number> or translate-x-<fraction> utilities like translate-x-4 and translate-x-1/4 to translate an element on the x-axis:

-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 轴(Translating on the y-axis)

¥Translating on the y-axis

使用 translate-y-<number> 或 translate-y-<fraction> 工具（如 translate-y-6 和 translate-y-1/3）在 y 轴上平移元素：

¥Use translate-y-<number> or translate-y-<fraction> utilities like translate-y-6 and translate-y-1/3 to translate an element on the y-axis:

-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 轴上平移(Translating on the z-axis)

¥Translating on the z-axis

使用 translate-z-<number> 工具（如 translate-z-6 和 -translate-z-12）在 z 轴上平移元素：

¥Use translate-z-<number> utilities like translate-z-6 and -translate-z-12 to translate an element on the z-axis:

-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 工具应用于父元素。

¥Note that the translate-z-<number> utilities require the transform-3d utility to be applied to the parent element.

使用自定义值(Using a custom value)

¥Using a custom value

使用 translate-[<value>] 语法 根据完全自定义的值设置 translation：

<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() 函数。

响应式设计(Responsive design)

¥Responsive design

在 translate 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

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

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