HTML_CSS
Googleでログイン
問題49：要素を回転させよう
要素を回転させましょう!
画像を参考に要素を回転させましょう!(アニメーションではなく静止でOKです)
画像を参考に要素を回転させましょう!(アニメーションではなく静止で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¥
補足
忍者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)のように指定します。
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)のように指定します。
#忍者CODE無料問題集で活動を記録しよう
完了にする！
1.HTMLの宣言をしてみよう
45degで45度、90degで90度と回転します。