Tailwind CSS 平移

2022-08-12 10:44 更新

平移

平移元素的功能类。

Class
Properties
translate-x-0 --tw-translate-x: 0px;
translate-x-px --tw-translate-x: 1px;
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-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-px --tw-translate-x: -1px;
-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-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-px --tw-translate-y: 1px;
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-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-px --tw-translate-y: -1px;
-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-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 ...">

响应式

要在特定的断点处控制元素的变换,可在任何现有的变换功能类中添加 ​{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.spacing​ 或 ​theme.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,
    }
  }


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号