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

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

テキストを含む div を回転して左上に配置するには

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

ここでは、transform-origin プロパティが左上に設定されており、左上隅を基準にして回転が行われます。 translationX(-100%) 変換は、回転された要素をその幅の 100% だけ左に移動します。

要素を右端に揃えるには、translateX のように、translateX の値を正の値に変更できます。 (100%)。これにより、回転された要素が幅の 100% だけ右に移動します。

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

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