問題

10
CSSAnimation

コードを修正して正しく表示しよう

CSSAnimationの問題に挑戦しよう!

問題

コードを修正して正しく表示しよう

今回はコードを修正してもらいたいと思います。
プログラミングをし始めたころに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¥
                

期待する画面

解答と解説

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

どうだったでしょうか。
コードの間違い探しはコードが長くなればなるほど困難になります。
その時間が長くなることによって作業効率が大幅に下がります。
今回はhover時のtransformによって上書きされてrotateが消えてしまうため、hover時の方にもrotateを足せば解決します。

さらにスキルアップしたい方は公式LINEから「CSSAnimation」と送信すると動画が見れます。

LINE登録して動画を視聴する
今なら豪華5大特典もらえる! LINE登録でGET