CSSを使用して要素を90度回転させる方法

transformプロパティを使用する方法: 要素を90度回転させるためには、CSSのtransformプロパティを使用します。以下のコード例を参考にしてください。

.rotate-90 {
  transform: rotate(90deg);
}

上記のクラスを要素に追加すると、その要素が90度回転します。

transform-originプロパティを使用する方法: 要素を回転させる際の基準点を指定するには、transform-originプロパティを使用します。以下のコード例を参考にしてください。

.rotate-90 {
  transform: rotate(90deg);
  transform-origin: top left;
}

上記のクラスを要素に追加すると、要素はその左上隅を基準にして90度回転します。

transformプロパティを使用して要素内のテキストを回転させる方法: 要素内のテキストのみを回転させるには、テキストを囲む要素を作成し、その要素に対して回転を適用します。以下のコード例を参考にしてください。

<div class="rotate-90">
  <span class="rotate-minus-90">回転するテキスト</span>
</div>

.rotate-90 {
  transform: rotate(90deg);
  display: inline-block;
}
.rotate-minus-90 {
  transform: rotate(-90deg);
  display: inline-block;
}

上記の例では、テキストが90度回転する要素を作成し、その中にテキストを回転しない要素を作成しています。

以上が、CSSを使用して要素を90度回転させる方法です。この方法を使用することで、要素の回転が可能になります。適用したい要素に対して適切なクラスを追加することで、簡単に回転させることができます。