ログイン
問題49

要素を回転させよう

初級32では、水平線を斜線に変更する問題を行ないました。 同じ要領で要素を回転させ、斜め45度のボックスを表示させてみましょう!

アイコン画像

問題49:要素を回転させよう

要素を回転させましょう!
画像を参考に要素を回転させましょう!(アニメーションではなく静止でOKです)

エディターのアイコンあらかじめエディタに書くコード

                <div></div>
¥HTML¥
              

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

              <div></div>
¥HTML¥
            
              div {
  width: 200px;
  height: 100px;
  border: 1px solid #000;
  background-color: red;
  transform:rotate(45deg); 
  margin-top: 100px;
}
¥CSS¥
            

コメントのアイコン解説

要素の回転にはtransform:rotate(x deg); をしようします。

45degで45度、90degで90度と回転します。
ログインして解答を見る

コメントのアイコン補足

忍者CODEの問題集でも頻繁に登場するtransformについて簡単に説明しておきます。
transformとは、変形させる,変える,変換するなどの意味をもちます。
CSS Transformに付与できる値は、
translate(平行移動)、rotate(回転)、scale(拡大縮小)、skew(斜傾変形)
この4つがあります。
translateは、X軸とY軸を指定し、それぞれに移動する長さ(px)を指定して使います。
rotateは初級32でも解説したので省略します。
scaleは、scale(X軸の数値、Y軸の数値)のように指定します。例えば「1.5」のような倍数で指定し、単位は書く必要がありません。
skewはX軸とY軸を同時に設定できます。(30deg, 30deg)のように指定します。
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
HTML_CSSを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる