問題

3
CSSAnimation

円を転がそう

CSSAnimationの問題に挑戦しよう!

問題

円を転がそう

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

あらかじめエディタに書くコード

                    <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¥
                

期待する画面

解答と解説

解説

LINE登録して解答を見る

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

いかがでしたか?
transform、translateXが今回のミソかと思います。直径100pxの玉を360度転がすと、直径*円周率分だけ移動するのでtranslateXの値は314pxとなります。簡単な算数の問題でした。

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

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