1. 转换
  2. 转变

Quick reference

属性
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);
translate-x-11transform: translateX(2.75rem);
translate-y-11transform: translateY(2.75rem);
translate-x-12transform: translateX(3rem);
translate-y-12transform: translateY(3rem);
translate-x-14transform: translateX(3.5rem);
translate-y-14transform: translateY(3.5rem);
translate-x-16transform: translateX(4rem);
translate-y-16transform: translateY(4rem);
translate-x-20transform: translateX(5rem);
translate-y-20transform: translateY(5rem);
translate-x-24transform: translateX(6rem);
translate-y-24transform: translateY(6rem);
translate-x-28transform: translateX(7rem);
translate-y-28transform: translateY(7rem);
translate-x-32transform: translateX(8rem);
translate-y-32transform: translateY(8rem);
translate-x-36transform: translateX(9rem);
translate-y-36transform: translateY(9rem);
translate-x-40transform: translateX(10rem);
translate-y-40transform: translateY(10rem);
translate-x-44transform: translateX(11rem);
translate-y-44transform: translateY(11rem);
translate-x-48transform: translateX(12rem);
translate-y-48transform: translateY(12rem);
translate-x-52transform: translateX(13rem);
translate-y-52transform: translateY(13rem);
translate-x-56transform: translateX(14rem);
translate-y-56transform: translateY(14rem);
translate-x-60transform: translateX(15rem);
translate-y-60transform: translateY(15rem);
translate-x-64transform: translateX(16rem);
translate-y-64transform: translateY(16rem);
translate-x-72transform: translateX(18rem);
translate-y-72transform: translateY(18rem);
translate-x-80transform: translateX(20rem);
translate-y-80transform: translateY(20rem);
translate-x-96transform: translateX(24rem);
translate-y-96transform: translateY(24rem);
translate-x-1/2transform: translateX(50%);
translate-x-1/3transform: translateX(33.333333%);
translate-x-2/3transform: translateX(66.666667%);
translate-x-1/4transform: translateX(25%);
translate-x-2/4transform: translateX(50%);
translate-x-3/4transform: translateX(75%);
translate-x-fulltransform: translateX(100%);
translate-y-1/2transform: translateY(50%);
translate-y-1/3transform: translateY(33.333333%);
translate-y-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%);

基本用法

¥Basic usage

转变一个元素

¥Translating an element

使用 translate-x-*translate-y-* 工具来转变元素。

¥Use the translate-x-* and translate-y-* utilities to translate an element.

translate-y-6

-translate-y-6

translate-x-6

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

使用负值

¥Using negative values

要使用负转变值,请在类名前加上破折号以将其转换为负值。

¥To use a negative translate value, prefix the class name with a dash to convert it to a negative value.

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

删除转换

¥Removing transforms

要一次删除元素上的所有转换,请使用 transform-none 工具:

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

当你想要有条件地删除转换时(例如悬停时或在特定断点处),这可能很有用。

硬件加速

¥Hardware acceleration

如果你的转场由 GPU 而不是 CPU 渲染时效果更好,你可以通过添加 transform-gpu 工具来强制硬件加速:

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

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


有条件地应用

悬停、聚焦和其他状态

Tailwind 允许你使用变体修饰符在不同状态下有条件地应用工具类。例如,使用hover:translate-y-12 仅在 hover 时应用 translate-y-12 工具。

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

有关所有可用状态修饰符的完整列表,请查看悬停、聚焦、以及其他状态 文档。

断点和媒体查询

你还可以使用变体修饰符来定位媒体查询,例如响应式断点、暗黑模式、首选减少运动等。例如,使用 md:translate-y-12 仅在中等屏幕尺寸及以上时应用 translate-y-12 工具。

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

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


使用自定义值

¥Using custom values

自定义主题

¥Customizing your theme

默认情况下,Tailwind 提供与 默认间距比例 匹配的固定值 translate 工具,以及相对于元素大小的 50% 和 100% 的转变变化。你可以通过编辑 tailwind.config.js 文件中的 theme.spacingtheme.extend.spacing 来自定义间距比例。

¥By default, Tailwind provides fixed value translate utilities that match the default spacing scale, as well as 50% and 100% variations for translating relative to the element’s size. You can customize your spacing scale by editing theme.spacing or theme.extend.spacing in your tailwind.config.js file.

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

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

¥Alternatively, you can customize just the translate scale by editing theme.translate or theme.extend.translate in your tailwind.config.js file.

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

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

¥Learn more about customizing the default theme in the theme customization documentation.

任意值

¥Arbitrary values

如果你需要使用一次性的 translate 值,而该值没有必要包含在你的主题中,请使用方括号动态生成属性,使用任意值。

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

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