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

要素を回転する場合、変換元の方法を理解することが重要ですその位置に影響を与えます。このプロパティは、要素が回転する中心となる点を指定します。変換原点を調整することで、回転後の要素の最終位置を効果的に制御できます。

回転した要素を左上隅に配置するには、変換原点を「左上」に変更し、translateX を「-」に設定します。 100%」。これにより、要素が左上隅を中心に回転し、適切な位置に移動します。

コード例は次のとおりです:

  Picture by Name

body {
  margin: 0;
}

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

逆に、回転した要素を右上隅に配置するには、transform-origin を「右上」に変更し、translateX を「-100%」に設定したままにします。

フィドルでのこの実装は次のように提供されています: [JS Fiddle](https://jsfiddle.net/wddwnj3t/).

必ず調整してください。特定の要件に合わせて、必要に応じて値を配置します。さまざまな変換元の設定を試して、回転された要素の望ましい配置とレイアウトを実現します。