原点変換

Tailwind CSS version
v1.2.0+

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

Class reference

Class
Properties
.origin-centertransform-origin: center;
.origin-toptransform-origin: top;
.origin-top-righttransform-origin: top right;
.origin-righttransform-origin: right;
.origin-bottom-righttransform-origin: bottom right;
.origin-bottomtransform-origin: bottom;
.origin-bottom-lefttransform-origin: bottom left;
.origin-lefttransform-origin: left;
.origin-top-lefttransform-origin: top left;

Usage

origin-{keyword}ユーティリティを使用して、要素の変換原点を指定します。

<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-left transform rotate-45 ...">

Responsive

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

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

<img class="origin-center sm:origin-top-left md:origin-top-right lg:origin-bottom-right xl:origin-bottom-left ...">

Customizing

Origin values

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

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

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

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

デフォルトでonly responsive バリアントはtransform-origin utilitiesのために作られます。

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

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

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

無効にする

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

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

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

Tailwind UI is now in early access!