ホームページ > 記事 > ウェブフロントエンド > テキストを含む div を回転して左上隅に揃えるにはどうすればよいですか?
回転した要素を左上隅または右上隅に揃える
このクエリでは、ユーザーは次の内容を含む 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 サイトの他の関連記事を参照してください。