HTMLとCSSを使用した90度回転するdiv要素の実装方法


  1. CSSのtransformプロパティを使用する方法: div要素を回転させるためには、CSSのtransformプロパティを使用します。具体的な手順は以下の通りです。

    Step 1: HTMLでdiv要素を作成します。

    <div id="myDiv">回転するdiv要素</div>

    Step 2: CSSでdiv要素を回転させるスタイルを指定します。

    #myDiv {
     transform: rotate(90deg);
    }

    これにより、div要素が90度回転します。

  2. CSSのtransformプロパティとtransitionプロパティを組み合わせる方法: div要素をスムーズに回転させるためには、transitionプロパティを使用します。具体的な手順は以下の通りです。

    Step 1: HTMLでdiv要素を作成します。(同じ要素を使用します)

    <div id="myDiv">回転するdiv要素</div>

    Step 2: CSSでdiv要素を回転させるスタイルとトランジションの設定を指定します。

    #myDiv {
     transform: rotate(90deg);
     transition: transform 0.5s ease;
    }

    これにより、div要素が0.5秒かけて90度回転します。