快速参考

属性
translate-x-0transform: translateX(0px);
translate-y-0transform: translateY(0px);
translate-x-pxtransform: translateX(1px);
translate-y-pxtransform: translateY(1px);
translate-x-0.5transform: translateX(0.125rem);
translate-y-0.5transform: translateY(0.125rem);
translate-x-1transform: translateX(0.25rem);
translate-y-1transform: translateY(0.25rem);
translate-x-1.5transform: translateX(0.375rem);
translate-y-1.5transform: translateY(0.375rem);
translate-x-2transform: translateX(0.5rem);
translate-y-2transform: translateY(0.5rem);
translate-x-2.5transform: translateX(0.625rem);
translate-y-2.5transform: translateY(0.625rem);
translate-x-3transform: translateX(0.75rem);
translate-y-3transform: translateY(0.75rem);
translate-x-3.5transform: translateX(0.875rem);
translate-y-3.5transform: translateY(0.875rem);
translate-x-4transform: translateX(1rem);
translate-y-4transform: translateY(1rem);
translate-x-5transform: translateX(1.25rem);
translate-y-5transform: translateY(1.25rem);
translate-x-6transform: translateX(1.5rem);
translate-y-6transform: translateY(1.5rem);
translate-x-7transform: translateX(1.75rem);
translate-y-7transform: translateY(1.75rem);
translate-x-8transform: translateX(2rem);
translate-y-8transform: translateY(2rem);
translate-x-9transform: translateX(2.25rem);
translate-y-9transform: translateY(2.25rem);
translate-x-10transform: translateX(2.5rem);
translate-y-10transform: translateY(2.5rem);
translateX-11transform: translateX(2.75rem);
translateY-11transform: translateY(2.75rem);
translateX-12transform: translateX(3rem);
translateY-12transform: translateY(3rem);
translateX-14transform: translateX(3.5rem);
translateY-14transform: translateY(3.5rem);
translateX-16transform: translateX(4rem);
translateY-16transform: translateY(4rem);
translateX-20transform: translateX(5rem);
translateY-20transform: translateY(5rem);
translateX-24transform: translateX(6rem);
translateY-24transform: translateY(6rem);
translateX-28transform: translateX(7rem);
translateY-28transform: translateY(7rem);
translateX-32transform: translateX(8rem);
translateY-32transform: translateY(8rem);
translateX-36transform: translateX(9rem);
translateY-36transform: translateY(9rem);
translateX-40transform: translateX(10rem);
translateY-40transform: translateY(10rem);
translateX-44transform: translateX(11rem);
translateY-44transform: translateY(11rem);
translateX-48transform: translateX(12rem);
translateY-48transform: translateY(12rem);
translateX-52transform: translateX(13rem);
translateY-52transform: translateY(13rem);
translateX-56transform: translateX(14rem);
translateY-56transform: translateY(14rem);
translateX-60transform: translateX(15rem);
translateY-60transform: translateY(15rem);
translateX-64transform: translateX(16rem);
translateY-64transform: translateY(16rem);
translateX-72transform: translateX(18rem);
translateY-72transform: translateY(18rem);
translateX-80transform: translateX(20rem);
translateY-80transform: translateY(20rem);
translateX-96transform: translateX(24rem);
translateY-96transform: translateY(24rem);
translateX-1/2transform: translateX(50%);
translateX-1/3transform: translateX(33.333333%);
translateX-2/3transform: translateX(66.666667%);
translateX-1/4transform: translateX(25%);
translateX-2/4transform: translateX(50%);
translateX-3/4transform: translateX(75%);
translateX-fulltransform: translateX(100%);
translateY-1/2transform: translateY(50%);
translateY-1/3transform: translateY(33.333333%);
translateY-2/3transform: translateY(66.666667%);
translate-y-1/4transform: translateY(25%);
translate-y-2/4transform: translateY(50%);
translate-y-3/4transform: translateY(75%);
translate-y-fulltransform: translateY(100%);

基本用法

平移元素

使用 translate-x-{amount}translate-y-{amount} 实用程序来平移元素。

translate-y-6

-translate-y-6

translate-x-6

<img class="translate-y-6 ...">
<img class="-translate-y-6 ...">
<img class="translate-x-6 ...">

使用负值

要使用负平移值,请在类名前添加一个连字符将其转换为负值。

<img class="-translate-y-6 ...">

移除变换

要一次性移除元素上的所有变换,请使用 transform-none 实用程序

<div class="scale-75 translate-x-4 skew-y-3 md:transform-none">
  <!-- ... -->
</div>

当您想要有条件地移除变换时,这很有用,例如在悬停时或在特定断点处。

硬件加速

如果您的过渡效果在由 GPU 渲染时比由 CPU 渲染时表现更好,您可以通过添加 transform-gpu 实用程序来强制硬件加速。

<div class="translate-y-6 transform-gpu">
  <!-- ... -->
</div>

如果需要有条件地撤消此操作,请使用 transform-cpu 将其强制返回到 CPU。


有条件地应用

悬停、焦点和其他状态

Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如,使用 hover:translate-y-12 仅在悬停时应用 translate-y-12 实用程序。

<div class="hover:translate-y-12">
  <!-- ... -->
</div>

有关所有可用状态修饰符的完整列表,请查看 悬停、焦点和其它状态 文档。

断点和媒体查询

您还可以使用变体修饰符来定位媒体查询,例如响应式断点、暗模式、prefers-reduced-motion 等等。例如,使用 md:translate-y-12 仅在中型屏幕尺寸及以上时应用 translate-y-12 实用程序。

<div class="md:translate-y-12">
  <!-- ... -->
</div>

要了解更多信息,请查看有关 响应式设计暗模式其它媒体查询修饰符 的文档。


使用自定义值

自定义您的主题

默认情况下,Tailwind 提供了与 默认间距比例 相匹配的固定值 translate 实用程序,以及用于相对于元素大小进行平移的 50% 和 100% 变体。您可以通过编辑 tailwind.config.js 文件中的 theme.spacingtheme.extend.spacing 来自定义您的间距比例。

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '4.25': '17rem',
      }
    }
  }
}

或者,您可以通过编辑 tailwind.config.js 文件中的 theme.translatetheme.extend.translate 来自定义仅平移比例。

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      translate: {
        '4.25': '17rem',
      }
    }
  }
}

主题自定义 文档中了解有关自定义默认主题的更多信息。

任意值

如果您需要使用一个不适合包含在主题中的 translate 值,请使用方括号使用任何任意值动态生成属性。

<div class="translate-y-[17rem]">
  <!-- ... -->
</div>

任意值 文档中了解有关任意值支持的更多信息。