ホームページ  >  記事  >  ウェブフロントエンド  >  要素を回転して左上隅または右上隅に配置するにはどうすればよいですか?

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

Barbara Streisand
Barbara Streisandオリジナル
2024-11-10 19:13:02544ブラウズ

How to Rotate and Position an Element on the Top Left or Top Right Corner?

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

テキストを含む 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。