💨

【tailwindcss和訳】TRANSFORMS/Transform Origin

2021/11/02に公開約2,800字

この記事について

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

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


Transform Origin

要素の変換の原点を指定するためのユーティリティーです。

クラス プロパティ
origin-center transform-origin: center;
origin-top transform-origin: top;
origin-top-right transform-origin: top right;
origin-right transform-origin: right;
origin-bottom-right transform-origin: bottom right;
origin-bottom transform-origin: bottom;
origin-bottom-left transform-origin: bottom left;
origin-left transform-origin: left;
origin-top-left transform-origin: top left;

使い方

origin-{keyword}ユーティリティーを使って、要素のトランスフォームの原点を指定します。

Image from Gyazo

<img class="origin-center transform rotate-45 ..." />
<img class="origin-top-left transform-rotate-45 ..." />
<img class="origin-bottom-right transform-rotate-45 ..." />
<img class="origin-bottom-right transform-rotate-45 ..." />
<img class="origin-left transform-rotate-45 ..." />

レスポンシブ

特定のブレイクポイントにおける要素のトランスフォームオリジンを制御するには、既存のトランスフォームオリジンユーティリティーに{screen}: というプレフィックスを追加します。例えば、md:origin-top を使用して、origin-top ユーティリティを中程度のスクリーンサイズ以上でのみ適用します。

<img class="origin-center md:origin-top ..." />

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

カスタマイズ

オリジンの値

デフォルトでは、Tailwind はすべての組み込みブラウザキーワードオプションのためのトランスフォームオリジンユーティリティを提供しています。これらを変更、追加、または削除するには、Tailwind のテーマ設定の transformOrigin セクションをカスタマイズします。

tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        transformOrigin: {
+        '24': '6rem',
+        'full': '100%',
        }
      }
    }
  }

デフォルトのテーマをカスタマイズする方法については、テーマのカスタマイズに関するドキュメントで詳しく説明しています。

バリアント

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

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

例えば、このコンフィグはホバーとフォーカスのバリアントも生成します。

tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+      transformOrigin: ['hover', 'focus'],
      }
    }
  }

無効化

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

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

Discussion

ログインするとコメントできます