はしくれエンジニアもどきのメモ

情報・Web系技術・Englishの勉強メモ・備忘録です。

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

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

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

球 + アニメーション

codepen.io

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

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

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

広告を非表示にする