問題
32rotateで要素を回転しよう
CSSでは、要素を回転させてデザインやUIに変化を加えることができます。例えば、ハンバーガーメニューの開閉アイコンや矢印アイコンの向き変更、装飾デザインなどで活用されています。
この問題では、要素を回転させる基本的な考え方を学びながら、2本の線を組み合わせてバツ印を作成してみましょう。実務でもよく使われるCSS表現のひとつです。
CSS rotateとは？要素を回転させる基本の書き方
CSS rotateが使われる場面
CSS rotateは、要素の向きや角度を変えたいときに使われるCSSの機能です。Webサイトでは、ハンバーガーメニューの閉じるアイコンや矢印アイコンの向き変更、カードや画像の装飾などで活用されています。要素を回転させることで、シンプルな図形にも動きや意味を持たせることができます。
rotateとtransformの関係
CSSで要素を回転させるには、要素を変形させる考え方を理解することが大切です。回転は、拡大・縮小や移動と同じく、見た目を変化させる表現のひとつです。実務ではアイコンやボタン、ホバー時の演出などにも使われるため、まずは要素を回転させる基本イメージをつかんでおきましょう。
CSS rotateで要素を回転してみよう
問題
「rotateで要素を回転しよう」
rotateを使って、ハンバーガーメニューなどで使われる「×」アイコンを作成してみましょう。2本の線を回転させて重ねることで、閉じるボタンのような見た目を表現します。見本画像を参考にしながらCSSを記述してください。
期待する画面
解答と解説（rotateで要素を回転しよう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
実務で rotate を使用した際、「回転はしたけれど、中央からズレて綺麗なバツ印にならない」という問題が頻繁に発生します。これは、要素の回転基準点（デフォルトは中心）や、元々の要素の配置（position など）が影響しているためです。
意図した位置に配置できない場合は、以下のプロパティをあわせて確認・調整しましょう。
1.transform-origin プロパティ： 要素のどの位置（左上、中央など）を軸にして回転させるかを指定します。
2.position: absolute; による重ね合わせ： 2本の疑似要素が完全に同じ位置からスタートするように、親要素を基準に絶対配置で重ねてから回転させると、ズレを防ぎやすくなります。
これらはハンバーガーメニューのアニメーションを実装する際の必須知識となるため、角度の変更（90deg や 180deg など）を試しながら、自由度の高いUIデザインの基礎をマスターしましょう。
補足
CSS rotateで回転角度を指定する場合は、deg（Degree：角度）という単位を使用します。例えば45degなら45度回転し、マイナスの値を指定すると反時計回りに回転します。
また、rotateは閉じるボタン（×アイコン）やハンバーガーメニュー、矢印アイコンの向き変更など実務でもよく利用されるCSS機能です。transitionと組み合わせることで、ゆっくり回転するアニメーションも実装できます。
・rotate応用：要素を回転させよう
・transform関連：hoverしたら画像を大きくしよう
・アニメーション応用：要素を永遠に回転させよう
・問題集一覧：HTML/CSS問題集トップ
・CSSの基礎から学びたい方：CSS入門講座
CSS rotateのポイント
CSS rotateの角度指定を理解しよう
CSS rotateで要素を回転させる際は、deg（degree：角度）という単位を使用します。正の値を指定すると時計回り、負の値を指定すると反時計回りに回転します。角度を変えるだけで見た目の印象は大きく変化するため、アイコンの向き調整やボタンデザイン、装飾パーツの作成など幅広い場面で活用されています。回転の仕組みを理解しておくことで、さまざまなUIデザインへ応用できるようになります。
CSS rotateを実務で活用する方法
CSS rotateは、ハンバーガーメニューや矢印アイコン、アニメーション演出など実務でも頻繁に利用される機能です。近年は回転を指定する方法も増えていますが、まずは要素を回転させる基本的な考え方を身につけることが重要です。実務レベルの実装方法や学習の進め方に不安がある場合は、現役エンジニアへ相談しながら学習を進めるのもおすすめです。
