CSS3 で球(sphere) と転がっているようなアニメーション

CSS3 で球(sphere) と転がっているようなアニメーション

CSS3のみ で球(3次元)を作ってみました。

球 + アニメーション

codepen.io

border-radius: 50%; で円を作ります。

影は、box-shadow: inset Xpx Ypx Zpx; で内側につけて球っぽく見せています。

アニメーションは、transform: translateX(□ px) rotate(○ deg); で移動しながら回転させ、転がっていルように見せています。

参考リンク

• 集中CSS3 ~CSS3で影・角丸・グラデーション~ 中島 俊治 先生 - 無料動画学習｜schoo（スクー）