【CSSデザイン】回転しながら変形する癒しのボールの作り方

はじめに

CSSで遊ぶのが好きな女が、
回転しながら変形する癒しのボールをCSSだけで作成しました。

コードはこちら

See the Pen Untitled by 森由唯 (@ubdhtixg-the-scripter) on CodePen.

回転する仕組み

マウスホバー時に

• transform: translate() で水平方向に移動する
• transform: rotate() で180度回転する

transform: translate(200%, 0%) rotate(180deg);

これだけです

@keyframes でアニメーションさせても良いと思います。
グラデーションだけでなく、画像に置き換えてもかわいいかも。