回転した Div を左上隅または右上隅に揃えるにはどうすればよいですか?

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

Web ページの特定の隅に回転した要素を配置するには、次の方法があります。挑戦的。テキストを含む div を回転して左上隅または右上隅に揃えるシナリオを検討してみましょう。

指定された CSS スニペットには、ピンクの背景と「名前による画像」というテキストが含まれる div が含まれています。 」変換属性は div を 90 度回転し、希望する角の配置に応じてページの左端または右端に沿って垂直方向に配置します。

回転した div を左上隅に配置するための重要な手順は次のとおりです。変換元と変換の値を調整します。変換原点を左上に設定すると、回転ポイントがその隅に移動します。さらに、要素を左端に移動するには、translationX 値を -100% に設定する必要があります。

必要な変更を加えて修正した CSS を次に示します。

body {
  margin: 0;
}

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

このコードにより、次のことが保証されます。回転された div がページの左上隅に配置されていることを確認します。これらの値を適宜調整することで、要素を右上隅に揃えることもできます。

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