Hiroshi Yokota

はじめに

「ボタンにリッチ感を出したいな」ってことでくるっと回転するホバーアニメーションです。

DEMO

まずはどんな動きになるかデモをご覧ください。
DEMO

実装していく

DEMO 1

▼HTML

<div class="flip">
  <div class="flip-in">
    <div class="flip-in-front">
      <button class="btn">Button<button>
    <div>
    <div class="flip-in-back">
      <button class="btn btn-hover">Click!<button>
    <div>
  <div>
<div>

▼SCSS

.flip {
  width: 200px;
  height: 80px;
  margin: {
    right: auto;
    left: auto;
  }
  &:hover, &:focus {
    .flip-in {
      transform: rotateY(180deg);
    }
  }
  &-in {
    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;
      overflow: hidden;
    }
    &-front {
      transform: translateZ(1px);
    }
    &-back {
      transform: rotateY(180deg);
    }
    .btn {
      background: linear-gradient(-180deg,#5f69c5 0,#07119e 100%);
      font-weight: bold;
      color: #fff;
      font-size: 1.5em;
      width: 100%;
      height: 100%;
      border-radius: 50px;
    }
  }
}

DEMO 2

▼HTML

<div class="rotate">
  <div class="rotate-in">
    <button class="btn default-side">Button<button>
    <button class="btn hover-side">Click!<button>
  <div>
<div>

▼SCSS

.rotate {
  &-in {
    height: 80px;
    width: 200px;
    transform-style: preserve-3d;
    transition: transform 300ms ease-in-out;
    transform: translateZ(-40px);
    margin: {
      right: auto;
      left: auto;
    }
    &:hover {
      transform: rotateX(-90deg) translateY(40px);
    }
    .btn {
      position: absolute;
      backface-visibility: hidden;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      font-size: 1.5em;
      &.default-side {
        background-color: white;
        border: 3px solid #09b317;
        color: #09b317;
        transform: translateZ(40px);
      }
      &.hover-side {
        color: white;
        background-color: #09b317;
        transform: rotateX(90deg) translateZ(40px);
      }
    }
  }
}

どちらのDEMOもボタンの大枠の要素へtransform-style: preserve-3d;を付与することで3Dの概念を適用しているところがポイントです。

さいごに

どうでしょうか？ボタンホバー時に何かアニメーションがあるとクリックしたくなっちゃいますよね。
ボタン以外にも使えそうなアニメーションなのでどこかで使えればと。

参考ページ

https://liginc.co.jp/484008
https://frontend-diary.com/css-3dbutton/