CSSAnimation
Googleでログイン問題10：コードを修正して正しく表示しよう
今回はコードを修正してもらいたいと思います。
プログラミングをし始めたころに1番時間を取られるのは自分が書いたコードのどこが間違っているか見つける作業だと思います。
プログラミングをし始めたころに1番時間を取られるのは自分が書いたコードのどこが間違っているか見つける作業だと思います。
あらかじめエディタに書くコード
<div class="box">
<div class="reverse">あ</div>
</div>
¥HTML¥
.reverse{
transform: rotate(180deg);
background-color: #dddddd;
font-size: 3em;
width: 1em;
transition: .5s;
}
.box:hover .reverse{
transform: translateX(30px);
}
¥CSS¥
期待する画面
解答ソースコード
.box:hover .reverse{
transform:translateX(30px) rotate(180deg);
}
¥CSS¥
完了にする！
活動記録をTweetする
コードの間違い探しはコードが長くなればなるほど困難になります。
その時間が長くなることによって作業効率が大幅に下がります。
今回はhover時のtransformによって上書きされてrotateが消えてしまうため、hover時の方にもrotateを足せば解決します。