コインのようにくるくる回転するホバーアニメーションを作ってみよう【いろんな動きを作ってみようシリーズ】

コインのようにくるくる回転するホバーアニメーションを作ってみよう【いろんな動きを作ってみようシリーズ】

はっちゃん

はっちゃん

こんにちは、フロントエンドエンジニアのはっちゃんです。

今日は「コインがホバーで回転するアニメーション」を作っていきたいと思います。

LIGブログのメンバーページでも使われていますが、メンバーページのものはスマホでフリップした際のアニメーションもつけているので、ちょっと高度です。

今回紹介するものは、ホバーのみのアニメーションです。

画像を用意

表と裏の画像を用意します。とりあえず自分の画像を使うことにします。


コーディングの考え方

  1. コインの表と裏をposition: absolute;で重なり合うようにする
  2. コインの裏は、めくったときに反転してしまうので、transform: rotateY(180deg);であらかじめ回転させておく
  3. .flip-innerにpreserve-3dをつけて、子要素に3Dの概念を適用する
  4. コイン両面にbackface-visibility: hidden;をつけて裏側を表示しないようにする
  5. コインの表にtransform: translateZ(1px);をつけて完全に重ならないようにする

HTML

<div class="flip">
  <div class="flip-inner">
    <div class="front">
      <img class="thumbnail" src="https://82mou.github.io/src/images/coin-omote.jpg" alt="コイン表">
    </div>
    <div class="back">
      <img class="thumbnail thumbnail-hover" src="https://82mou.github.io/src/images/coin-ura.jpg" alt="コイン裏">
    </div>
  </div>
</div>

SCSS

.flip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 300px;
  &:hover {
    .flip-inner {
      transform: rotateY(180deg);
    }
  }
  .flip-inner {
    transform-style: preserve-3d;
    transition: transform .8s ease;
    height: 100%;
    width: 100%;
    .front, .back {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 50%;
      overflow: hidden;
    }
    .front {
      transform: translateZ(1px);
    }
    .back {
      transform: rotateY(180deg);
    }
    .thumbnail {
      width: 100%;
    }
  }
}

デモ

See the Pen
coin rotation animation on the hover
by k_hatsushi (@hatsushi_kazuya)
on CodePen.

まとめ

いかがでしたか?

preserve-3dはIE11非対応ですが、今後は当たり前のようにつかわれていくプロパティのひとつだと思います。

今のうちにいろいろな3D表現を作っておくと、リッチなアニメーションを提案できて評価がアップするかも……?

みなさんぜひ遊んでみてくださいね!

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

はっちゃん
はっちゃん フロントエンドエンジニア / 蓮子 和也

フロントエンドエンジニアのはっちゃんです。 雰囲気の良いチーム作りをしていけるよう頑張ります。 たまに外人に間違えられますが、鹿児島と千葉のハーフです。

このメンバーの記事をもっと読む
それいけ!フロントエンド | 213 articles
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL