Tailwind CSS on GitHub

平移

平移元素的功能类。

Default class reference

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

使用

平移一个元素时,首先要使用 transform 功能类启用变换,然后使用 translate-x-{amount}translate-y-{amount} 功能类指定平移方向和距离。

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

请注意,因为 Tailwind 使用 CSS 自定义属性来实现变换,变换功能不支持旧的浏览器,如 IE11。如果您的项目需要变换,并且需要支持旧的浏览器,添加您自己的功能或其他自定义 CSS。

响应式

要在特定的断点处控制元素的变换,可在任何现有的变换功能类中添加 {screen}: 前缀。例如,使用 md:translate-x-8 来应用 translate-x-8 功能,只在中等大小的屏幕上使用。

<img class="transform translate-x-2 md:translate-x-8 ...">

关于 Tailwind 的响应式设计功能的更多信息,请查看响应式设计文档。

自定义

Translate scale

默认情况下,Tailwind 提供了固定值的平移功能类,它与我们的 spacing scale 相匹配,以及相对于元素大小的 50% 和 100% 的平移变化。

您可以在您的 tailwind.config.js 文件中的 theme.spacingtheme.extend.spacing 部分自定义全局间距尺度。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        spacing: {
+         '72': '18rem',
+         '84': '21rem',
+         '96': '24rem',
        }
      }
    }
  }

要单独定制平移比例,请使用您的 tailwind.config.js 文件中的 theme.translate 部分。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        translate: {
+         '1/7': '14.2857143%',
+         '2/7': '28.5714286%',
+         '3/7': '42.8571429%',
+         '4/7': '57.1428571%',
+         '5/7': '71.4285714%',
+         '6/7': '85.7142857%',
        }
      }
    }
  }

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

变体

默认情况下, 针对 translate 功能类,只生成 responsive, hover and focus 变体。

您可以通过修改您的 tailwind.config.js 文件中的 variants 部分中的 translate 属性来控制为 translate 功能生成哪些变体。

例如,这个配置将生成 active and group-hover 变体:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       translate: ['active', 'group-hover'],
      }
    }
  }

禁用

如果您不打算在您的项目中使用 translate 功能,您可以通过在配置文件的 corePlugins 部分将 translate 属性设置为 false 来完全禁用它们:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     translate: false,
    }
  }