ホームページ >ウェブフロントエンド >CSSチュートリアル >テキストを含む div を回転して左上隅に揃えるにはどうすればよいですか?

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

Barbara Streisand
Barbara Streisandオリジナル
2024-11-06 16:14:02889ブラウズ

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

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