ログイン

問題10 コードを修正しよう1

CSSAnimationの問題

CSSAnimation

コードを修正しよう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¥
            
答えのアイコン

解説

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