問題
3
CSSアニメーション
円を転がそう
CSSアニメーションの問題に挑戦しよう！
問題
「円を転がそう」
今回は球を回転させて転がしましょう！
面白いアニメーションなので自力で頑張って仕上げてください。
あらかじめエディタに書くコード
<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となります。簡単な算数の問題でした。
