回転

Tailwind CSS version
v1.2.0+

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

Class reference

Class
Properties
.rotate-0--transform-rotate: 0;
.rotate-1--transform-rotate: 1deg;
.rotate-2--transform-rotate: 2deg;
.rotate-3--transform-rotate: 3deg;
.rotate-6--transform-rotate: 6deg;
.rotate-12--transform-rotate: 12deg;
.rotate-45--transform-rotate: 45deg;
.rotate-90--transform-rotate: 90deg;
.rotate-180--transform-rotate: 180deg;
.-rotate-180--transform-rotate: -180deg;
.-rotate-90--transform-rotate: -90deg;
.-rotate-45--transform-rotate: -45deg;
.-rotate-12--transform-rotate: -12deg;
.-rotate-6--transform-rotate: -6deg;
.-rotate-3--transform-rotate: -3deg;
.-rotate-2--transform-rotate: -2deg;
.-rotate-1--transform-rotate: -1deg;

使用方法

最初にtransformユーティリティで変換を有効にし、次にrotate-{angle} ユーティリティを使用して回転角度を指定して要素を回転させます。

<img class="transform rotate-0 ...">
<img class="transform rotate-45 ...">
<img class="transform rotate-90 ...">
<img class="transform rotate-180 ...">

TailwindはCSSカスタムプロパティを使用して変換を実装するため、変換ユーティリティはIE11のような古いブラウザではサポートされていないことに注意してください。 プロジェクトの変換が必要で、古いブラウザをサポートする必要がある場合、独自のユーティリティを追加またはその他のカスタムCSSを追加してください。

Responsive

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

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

<img class="transform rotate-0 sm:rotate-45 md:rotate-90 lg:rotate-180 xl:-rotate-90...">

Customizing

Rotate scale

デフォルトでは、Tailwindは7つの汎用回転ユーティリティを提供します。Tailwind構成のtheme.rotateセクションを編集して、これらを変更、追加、または削除します。

  // tailwind.config.js
  module.exports = {
    theme: {
      rotate: {
-       '-180': '-180deg',
        '-90': '-90deg',
-       '-45': '-45deg',
        '0': '0',
        '45': '45deg',
        '90': '90deg',
+       '135': '135deg',
        '180': '180deg',
+       '270': '270deg',
      }
    }
  }

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

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

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

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

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

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

無効にする

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

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

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

Tailwind UI is now in early access!