transform-origin

例

基本的な例

要素のtransform-originを設定するには、origin-top や origin-bottom-left のようなユーティリティを使用します。

origin-center

origin-top-left

origin-bottom

<img class="origin-center rotate-45 ..." src="/img/mountains.jpg" />
<img class="origin-top-left rotate-12 ..." src="/img/mountains.jpg" />
<img class="origin-bottom -rotate-12 ..." src="/img/mountains.jpg" />

カスタム値の使用

以下を使用してください origin-[<value>] 構文 を設定するにはtransform-origin完全にカスタムな値に基づいて

<img class="origin-[33%_75%] ..." src="/img/mountains.jpg" />

CSS変数には、以下も使用できます。 origin-(<custom-property>) 構文

<img class="origin-(--my-transform-origin) ..." src="/img/mountains.jpg" />

これは単なる省略形です。 origin-[var(<custom-property>)] var() 関数を自動的に追加します。

レスポンシブデザイン

プレフィックスa transform-origin ユーティリティ md: のようなブレークポイントバリアントを使用すると、ユーティリティを適用するのはmedium 画面サイズ以上のみになります。

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

バリアントの使用方法の詳細については、バリアントのドキュメントをご覧ください。