変換

Tailwind CSS version
v1.2.0+

変換を使用して要素を変換するためのユーティリティ。

Class reference

Class
Properties
.translate-x-0--transform-translate-x: 0;
.translate-x-1--transform-translate-x: 0.25rem;
.translate-x-2--transform-translate-x: 0.5rem;
.translate-x-3--transform-translate-x: 0.75rem;
.translate-x-4--transform-translate-x: 1rem;
.translate-x-5--transform-translate-x: 1.25rem;
.translate-x-6--transform-translate-x: 1.5rem;
.translate-x-8--transform-translate-x: 2rem;
.translate-x-10--transform-translate-x: 2.5rem;
.translate-x-12--transform-translate-x: 3rem;
.translate-x-16--transform-translate-x: 4rem;
.translate-x-20--transform-translate-x: 5rem;
.translate-x-24--transform-translate-x: 6rem;
.translate-x-32--transform-translate-x: 8rem;
.translate-x-40--transform-translate-x: 10rem;
.translate-x-48--transform-translate-x: 12rem;
.translate-x-56--transform-translate-x: 14rem;
.translate-x-64--transform-translate-x: 16rem;
.translate-x-px--transform-translate-x: 1px;
.-translate-x-1--transform-translate-x: -0.25rem;
.-translate-x-2--transform-translate-x: -0.5rem;
.-translate-x-3--transform-translate-x: -0.75rem;
.-translate-x-4--transform-translate-x: -1rem;
.-translate-x-5--transform-translate-x: -1.25rem;
.-translate-x-6--transform-translate-x: -1.5rem;
.-translate-x-8--transform-translate-x: -2rem;
.-translate-x-10--transform-translate-x: -2.5rem;
.-translate-x-12--transform-translate-x: -3rem;
.-translate-x-16--transform-translate-x: -4rem;
.-translate-x-20--transform-translate-x: -5rem;
.-translate-x-24--transform-translate-x: -6rem;
.-translate-x-32--transform-translate-x: -8rem;
.-translate-x-40--transform-translate-x: -10rem;
.-translate-x-48--transform-translate-x: -12rem;
.-translate-x-56--transform-translate-x: -14rem;
.-translate-x-64--transform-translate-x: -16rem;
.-translate-x-px--transform-translate-x: -1px;
.-translate-x-full--transform-translate-x: -100%;
.-translate-x-1/2--transform-translate-x: -50%;
.translate-x-1/2--transform-translate-x: 50%;
.translate-x-full--transform-translate-x: 100%;
.translate-y-0--transform-translate-y: 0;
.translate-y-1--transform-translate-y: 0.25rem;
.translate-y-2--transform-translate-y: 0.5rem;
.translate-y-3--transform-translate-y: 0.75rem;
.translate-y-4--transform-translate-y: 1rem;
.translate-y-5--transform-translate-y: 1.25rem;
.translate-y-6--transform-translate-y: 1.5rem;
.translate-y-8--transform-translate-y: 2rem;
.translate-y-10--transform-translate-y: 2.5rem;
.translate-y-12--transform-translate-y: 3rem;
.translate-y-16--transform-translate-y: 4rem;
.translate-y-20--transform-translate-y: 5rem;
.translate-y-24--transform-translate-y: 6rem;
.translate-y-32--transform-translate-y: 8rem;
.translate-y-40--transform-translate-y: 10rem;
.translate-y-48--transform-translate-y: 12rem;
.translate-y-56--transform-translate-y: 14rem;
.translate-y-64--transform-translate-y: 16rem;
.translate-y-px--transform-translate-y: 1px;
.-translate-y-1--transform-translate-y: -0.25rem;
.-translate-y-2--transform-translate-y: -0.5rem;
.-translate-y-3--transform-translate-y: -0.75rem;
.-translate-y-4--transform-translate-y: -1rem;
.-translate-y-5--transform-translate-y: -1.25rem;
.-translate-y-6--transform-translate-y: -1.5rem;
.-translate-y-8--transform-translate-y: -2rem;
.-translate-y-10--transform-translate-y: -2.5rem;
.-translate-y-12--transform-translate-y: -3rem;
.-translate-y-16--transform-translate-y: -4rem;
.-translate-y-20--transform-translate-y: -5rem;
.-translate-y-24--transform-translate-y: -6rem;
.-translate-y-32--transform-translate-y: -8rem;
.-translate-y-40--transform-translate-y: -10rem;
.-translate-y-48--transform-translate-y: -12rem;
.-translate-y-56--transform-translate-y: -14rem;
.-translate-y-64--transform-translate-y: -16rem;
.-translate-y-px--transform-translate-y: -1px;
.-translate-y-full--transform-translate-y: -100%;
.-translate-y-1/2--transform-translate-y: -50%;
.translate-y-1/2--transform-translate-y: 50%;
.translate-y-full--transform-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を使用してください。

Responsive

特定のブレークポイントで要素の変換を制御するには、既存の変換ユーティリティに{screen}:プレフィックスを追加します。たとえば、md:translate-x-8を使用して、中程度の画面サイズ以上でのみtranslate-x-8ユーティリティを適用します。

Tailwindのレスポンシブデザイン機能の詳細については、レスポンシブデザインのドキュメントをご覧ください。

<img class="transform translate-y-6 sm:-translate-y-6 md:translate-y-2 lg:-translate-y-8 xl:translate-y-0...">

Customizing

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%',
        }
      }
    }
  }

デフォルトテーマのカスタマイズについてはテーマのカスタマイズをご覧ください。

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive, hover and focus バリアントはtranslate utilitiesのために作られます。

あなたはどのバリアントがtranslate utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのtranslateプロパティを修正することによってコントロールできます。

例として、この設定は also active and group-hover バリアントを作ります。

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

無効にする

もしtranslate utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのtranslate propertyfalseに設定することで完全に無効にすることができます。

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

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!