ログイン
問題3

円を転がそう

アイコン画像

問題3:円を転がそう

今回は球を回転させて転がしましょう!
面白いアニメーションなので自力で頑張って仕上げてください。

エディターのアイコンあらかじめエディタに書くコード

                <div class="box">
  <div class="sphere">球</div>
</div>
¥HTML¥
              
                .sphere{
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 3em;
  background-color: #dddddd;
  border-radius: 50%;
}
¥CSS¥
              

ブラウザのアイコン期待する画面


タグアイコン解答ソースコード

              .sphere{
  transition:3s;
}
.box:hover .sphere{
  transform: translateX(314px) rotate(360deg);
}
¥CSS¥
            

コメントのアイコン解説

いかがでしたか?
transform、translateXが今回のミソかと思います。直径100pxの玉を360度転がすと、直径*円周率分だけ移動するのでtranslateXの値は314pxとなります。簡単な算数の問題でした。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする
CSSAnimationを学ぶなら現役エンジニア監修「甲賀コース」
LINEの友達追加でお役立ち動画をGET!!

閉じる