テキストを含む div を回転して左上隅に揃えるにはどうすればよいですか?-CSSチュートリアル-php.cn

テキストを含む div を回転して左上隅に揃えるにはどうすればよいですか?

Barbara Streisand

リリース： 2024-11-06 16:14:02

オリジナル

911 人が閲覧しました

How can I rotate a div with text and align it to the top left corner?

回転した要素を左上隅または右上隅に揃える

このクエリでは、ユーザーは次の内容を含む div を回転する際に問題が発生しました。テキストを左上端に揃えます。提供されたスニペットは、transform:rotate(-90deg) translationX(-50%) を使用して達成される回転を示しています。

解決策は、回転の開始点を指定する、transform-origin を左上に調整することです。さらに、翻訳を translationX(-100%) に変更すると、div が原点の 100% 左側に配置されるようになります。

更新されたコードスニペットは次のとおりです。

body {
  margin: 0;
}

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

ログイン後にコピー

これらの変更により、div は左上隅で回転され、親コンテナの上端と左端の両方に効果的に位置合わせされます。

以上がテキストを含む div を回転して左上隅に揃えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。