CSSの3Dアニメーションを使ってサイコロみたいなボタンを作る

CSS
2022.04.27
みく
みく

3Dアニメーションを勉強したので覚え書きとして作成方法をまとめたいと思います。

完成形コード

先に結論の完成形コードを書いておきます。

See the Pen サイコロみたいなボタン by miku-asai (@miku-asai) on CodePen.

  • transform-style: preserve-3d
  • transform: rotate
  • transform-origin
  • transition

今回は上記の4つの3Dアニメーションによく使用するCSSプロパティが特徴的なので、こちらを少し掘り下げて記述したいと思います。

作成手順

ボタンの基礎部分を作成する

HTML

<div class="wrap">
    <a class="button">
        <span class="hover">こんにちは</span>
        <span class="default">hello</span>
    </a>
</div>

SCSS

.wrap {
  text-align: center;
  margin: 50px 0;
}
.button {
  /*ボタンの初期設定*/
  display: inline-block;
  position: relative;
  width: 150px;
  height: 50px;
  margin: 0 auto;
  cursor: pointer;
}
.hover,.default {
  position: absolute;
  border: 1px solid #333;
  width: 100%;
  height: 100%;
  line-height: 50px;
  font-weight: bold;
  letter-spacing:0.08em;
  color: #333;
}
.hover {
  background-color: #ffdbed;
  color: #fff;
}
.default {
  text-transform: uppercase;
}

スタイルを追加していきます。
ボタンの初期設定として50px × 150pxのボタンを作成しました。今回の場合、これ以上文字が増えることがないので天地中央揃えに「height + line-height」を使用しましたが、2行以上になる場合や編集可能にする場合ははみ出てしまうのでプロパティを変更してください。

ホバー時に表示される面を90度後ろに回転させる

//追記分のみ

.button {
  transform-style: preserve-3d;
}
.hover {
  transform: rotateX(90deg);
}
.default {
  transform: rotateX(0);
}
.hover,.default {
  transform-origin: center center -25px;
}

ここでは追記分のみの記述をしています。
transform-style: preserve-3dは、通常の平面での表示から3Dの空間にするために必要なプロパティです。3Dの実装をする親要素に記述します。以下、mdnカスケーディングスタイルシートからの引用です。

transform-style は CSS のプロパティで、要素の子要素を 3D 空間に配置するのか、平面化して要素の平面に配置するのかを設定します。
平面化した場合、子要素は自身の 3D 空間に存在しなくなります。
このプロパティは継承されないため、葉要素以外のすべての子孫要素で設定する必要があります。

MDN Web Docs CSS:カスケーディングスタイルシート

次に、transform-style: preserve-3dを付けた子要素に、3D空間での挙動を実装します。
ホバーしていない状態では.hoverのボタンが見えない状態になっています。どこにいるかというと、.defaultの上の辺にくっついて上を向いた状態、つまり面自体が90度後ろに回転した状態になっています。この状態を表現するのにtransform: rotateXを使います。

rotateX() は CSS の関数で、要素の形を変化させずに横座標 (水平軸) の周りを回転させる変形を定義します。結果は <transform-function> データ型になります。

MDN Web Docs CSS:カスケーディングスタイルシート

さらに、ここでtransform-originを指定します。

transform-origin は CSS のプロパティで、要素の座標変換 (transform) における原点を設定します。
座標変換の原点とは、それを中心に座標変換が適用される点です。例えば、 [rotate()](/ja/docs/Web/CSS/transform-function/rotate) 関数における座標変換の原点は、回転の中心です。

MDN Web Docs CSS:カスケーディングスタイルシート


transform-originは支点の位置を決めるプロパティで値はx軸、y軸、z軸の3つまで指定できます。今回、高さが50pxだったのでz軸は50pxの半分の25pxに指定し、ボックスの中心を支点にしてrotateXが回転する支点を定めました。
.defaultはホバーしていない状態で変化はないのですが、今回.hoverを90度後ろに配置した記述を.defaultのホバー時の挙動で同様に記述するので、今の位置に戻ってこれるようにtransform: rotateX(0)を予め記述しておきました。

ホバー時の挙動

//追記分のみ

.button {
  /*hover*/
  &:hover {
    .hover {
      transform: rotateX(0);
    }
    .default {
      transform: rotateX(-90deg);
    }
  }
}
.hover,.default {
  transition: all 0.3s;
}

ホバー時の追記分のみ記述してあります。
.hoverを90度後ろに配置した時と似ていますが、transform-originで指定した支点を中心に.defaultを90度下に配置するように記述しました。
最後にtransitionをホバーする要素に指定して、スムーズなアニメーションができるようにしました。

トランジション (transition) は、要素の 2 つの状態間の変化を定義するためのものです。それぞれの状態は :hover や :active のような擬似クラスで定義されたり、 JavaScript を使用して動的に設定されたりします。

MDN Web Docs CSS:カスケーディングスタイルシート

まとめ

  • transform-style: preserve-3d
  • transform: rotate
  • transform-origin
  • transition

この記事では３Dアニメーションの時によく使用する上記のプロパティを中心にサイコロみたいなボタンの作成方法を書きました。私は日ごろ3Dアニメーションを実装する機会がないのですが、アニメーションをしない時にも使用できるプロパティもあるので知識が深まりました。アニメーションの実装、楽しいですね！！また違うものも実装してみたいと思います！

最後までお読みいただきありがとうございました！

コメント