💨
【tailwindcss和訳】TRANSFORMS/Translate
この記事について
この記事は、TRANSFORMS/Translateの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Translate
transform で要素を変換するためのユーティリティです。
クラスとプロパティの対応表
| クラス | プロパティ |
|---|---|
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ユーティリティーで transform を有効にし、次にtranslate-x-{amount}とtranslate-y-{amount}ユーティリティーで translate の方向と距離を指定して、要素をトランスレートします。
<img class="transform translate-y-6 ..." />
<img class="transform -translate-y-6 ..." />
<img class="transform translate-y-0 ..." />
レスポンシブ
特定のブレークポイントで要素のトランスレートを制御するには、既存の translate ユーティリティに {screen}: というプレフィックスを追加します。たとえば、md:translate-x-8 を使用すると、中程度の画面サイズ以上でのみ translate-x-8 ユーティリティを適用します。
<img class="transform translate-x-2 md:translate-x-8 ..." />
Tailwind のレスポンシブデザイン機能についての詳細は、レスポンシブデザインのドキュメントをご覧ください。
カスタマイズ
トランスレートスケール
デフォルトでは、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',
}
}
}
}
translate スケールを個別にカスタマイズするには、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%',
}
}
}
}
デフォルトのテーマをカスタマイズする方法については、テーマのカスタマイズに関するドキュメントで詳しく説明しています。
バリアント
デフォルトでは、レスポンシブバリアント、ホバーバリアント、フォーカスバリアントのみがトランスレートユーティリティ用に生成されます。
tailwind.config.jsファイルのvariantsセクションのtranslateプロパティを変更することで、トランスレートユーティリティのために生成されるバリアントをコントロールすることができます。
例えば、この設定では、アクティブとグループホバーのバリアントも生成されます。
tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ translate: ['active', 'group-hover'],
}
}
}
無効化
プロジェクトで translate ユーティリティを使用する予定がない場合は、設定ファイルの corePlugins セクションで translate プロパティを false に設定することで、完全に無効にすることができます。
tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ translate: false,
}
}
Discussion