回転した要素を左上隅または右上隅に配置するにはどうすればよいですか?

回転した要素を左上隅または右上隅に配置する

要素を回転する場合、変換と原点の変換方法を理解することが重要ですその位置に影響を与えます。このプロパティは、要素が回転する中心となる点を指定します。変換原点を調整することで、回転後の要素の最終位置を効果的に制御できます。

回転した要素を左上隅に配置するには、変換原点を「左上」に変更し、translateX を「-」に設定します。 100%」。これにより、要素が左上隅を中心に回転し、適切な位置に移動するようになります。

コード例を次に示します。

<div class="credit">
  Picture by Name
</div>

body {
  margin: 0;
}

.credit {
  transform-origin: top left;
  position: absolute;
  background-color: pink;
  transform: rotate(-90deg) translateX(-100%);
}

逆に、回転した要素を配置するには右上隅で、transform-origin を「右上」に変更し、translateX を「-100%」に設定したままにします。

提供されている Fiddle でこの実装を調べてください: [JS Fiddle](https://jsfiddle.net/wddwnj3t/).

特定の要件に合わせて、必要に応じて位置の値を調整することを忘れないでください。さまざまな変換元の設定を試して、回転された要素の適切な配置とレイアウトを実現します。

以上が回転した要素を左上隅または右上隅に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。