こんにちは、フロントエンドエンジニアのはっちゃんです。 今日は「コインがホバーで回転するアニメーション」を作っていきたいと思います。 LIGブログのメンバーページでも使われていますが、メンバーページのものはスマホでフリップした際のアニメーションもつけているので、ちょっと高度です。 今回紹介するものは、ホバーのみのアニメーションです。 画像を用意 表と裏の画像を用意します。とりあえず自分の画像を使うことにします。 コーディングの考え方 コインの表と裏をposition: absolute;で重なり合うようにする コインの裏は、めくったときに反転してしまうので、transform: rotateY(180deg);であらかじめ回転させておく .flip-innerにpreserve-3dをつけて、子要素に3Dの概念を適用する コイン両面にbackface-visibility: hidden;