HTML_CSS
Googleでログイン
問題32：rotateを使ったCSSデザイン
ハンバーガーメニューなどにある「×」をCSSで表現してみましょう!
見本画像を参考にしてCSSに記述し実装してください。
見本画像を参考にしてCSSに記述し実装してください。
期待する画面
解答ソースコード
<span></span>
¥HTML¥
body {
padding: 64px;
}
span::before,
span::after {
display: block;
content: ";
width: 50px;
height: 1px;
background: #000;
}
span::before {
transform: rotate(-45deg);
}
span::after {
transform: rotate(45deg);
}
¥CSS¥
補足
CSSで値に角度を指定する場合は、degという単位を使用します。
degとは、Degree(角度)を略したものです。
数値には、マイナスの値を入れることもできます。
プラスの値の場合は時計回りとなり、マイナスの値だと反時計回りに回転します。
CSSにはこのように水平な1本線を回転させて斜線にしたり、正方形の箱をX軸・Y軸・Z軸に回転させることもできます。
さらに回転させる動きにtransitionプロパティを使えば、ゆっくり回転させることができます。
degとは、Degree(角度)を略したものです。
数値には、マイナスの値を入れることもできます。
プラスの値の場合は時計回りとなり、マイナスの値だと反時計回りに回転します。
CSSにはこのように水平な1本線を回転させて斜線にしたり、正方形の箱をX軸・Y軸・Z軸に回転させることもできます。
さらに回転させる動きにtransitionプロパティを使えば、ゆっくり回転させることができます。
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
transform: rotate(-45deg);とtransform: rotate(45deg);
を指定する事でクロスになります。