【tailwindcss和訳】TRANSFORMS/Transform

この記事について

この記事は、TRANSFORMS/Transformの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

---

Transform

トランスフォームの動作を制御するためのユーティリティ。

クラス	プロパティ
transform	・ --tw-translate-x: 0; ・--tw-translate-y: 0; ・--tw-rotate: 0; ・--tw-skew-x: 0; ・--tw-skew-y: 0; ・--tw-scale-x: 1; ・--tw-scale-y: 1; ・transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform-gpu	・--tw-translate-x: 0; ・--tw-translate-y: 0; ・--tw-rotate: 0; ・--tw-skew-x: 0; ・--tw-skew-y: 0; ・--tw-scale-x: 1; ・--tw-scale-y: 1; ・transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform-none	transform: none;

Tranform

トランスフォームを有効にするには、transform ユーティリティーを追加する必要があります。

<img class="transform rotate-45 ..." />
<img class="transform skew-y-12 ..." />
<img class="transform scale-50 ..." /> <img class="transform square-50 ..." />
<img class="transform-x-4 translate-y-4 ..." /> <img class="transform-x-4 translate-y-4 ..." />

ハードウェアアクセラレーション | Hardware acceleration

多くの transformation は、CPU ではなく、GPU で実行することができます。これにより、パフォーマンスが向上します。GPU アクセラレーションを有効にするには、transform-gpu ユーティリティーを使用します。

<div class="transform-gpu scale-150 ..."></div> </div

なし | None

トランスフォームを無効にしたい場合は、transform-none ユーティリティを使用できます。

<div class="transform-rotate-45 lg:transform-none ..."></div>
です。

レスポンシブ

特定のブレークポイントでトランスフォームを有効または無効にするには、いずれかの transform ユーティリティーに{screen}: というプレフィックスを追加します。たとえば、md:transformを使用すると、中程度のスクリーンサイズ以上でのみtransformユーティリティを適用できます。

<img class="transform sm:transform-gpu md:transform-none ..." />

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

バリアント

デフォルトでは、トランスフォームユーティリティにはレスポンシブバリアントのみが生成されます。

tailwind.config.jsファイルのvariantsセクションのtransformプロパティを変更することで、トランスフォームユーティリティのために生成されるバリアントを制御することができます。

例えば、この設定ではホバーとフォーカスのバリアントも生成されます。

tailwind.config.js

  module.exports = {
    variants: {
      extend: {
        // ...
+     transform: ['hover', 'focus'],
      }
    }
  }

無効化

プロジェクトでtransformユーティリティーを使用する予定がない場合は、設定ファイルのcorePluginsセクションでトランスフォームプロパティをfalseに設定することで、完全に無効化することができます。

tailwind.config.js

  module.exports = {
    corePlugins: {
      // ...
+   transform: false,
    }
  }