CSSで3Dボタンフリップアニメーションを作成する方法

フリップアニメーション 表示される人気のあるCSS効果は 前面と背面の両方 HTML要素を上から下へ、または左から右へ（およびその逆に）回転させて2次元ではradですが、3Dで実行するとさらに涼しくなります。.

この記事では、私はあなたにする方法を紹介します 単純な3Dボタンを作成する, そして フリップアニメーションを追加する 彼らへ.

あなたは下のデモで結果を見ることができます、あなたがボタンをクリックするならば、彼らはラベルされたフリップアニメーションを実行するでしょう.

1. 3Dボタン用のHTMLを作成する

3Dボタンを作成するには（上→下を反転）、まず3つ重ねます

2つはボタンの前面と背面用、もう1つは中央の奥行きを埋めるためのものです。 3つのボタンの面を .flipBtn 3Dボタンとして機能するコンテナ。3Dボタンを .flipBtnWrapper ラッパー.

2. CSSを使って基本的なスタイルを追加する

設定します 幅 そして 高さ ラッパー、ボタン、ボタン面のプロパティを設定し、相対/絶対配置手法を使用して配置します。.

 .flipBtnWrapper 幅：200ピクセル。高さ：200ピクセル。位置：相対; .flipBtn、.flipBtn_face 幅：100％;身長：100％。位置：絶対

3. 3つのボタン面をスタイルする

前面と背面のボタン面に背景画像を追加し、両方の画像の後ろにクールな線形グラデーションを設定します。ここでのトリックは、CSSでは、同じ要素の背景画像として複数の画像を設定でき、また背景画像としてグラデーションを宣言できるということです。.

真ん中の顔, .flipBtn_mid, が与えられる 高さ 前面と背面の間に20pxの同じスペースが作成され、20pxの同じスペースが作成されます。後者を使用して後者を実現します。 translateZ（） CSS機能は z軸に沿って要素を移動する. 背面を10ピクセル後ろに押し、前面を10ピクセル前に進めます。.

 .flipBtn_front background-image：url（ "image / css-3d-flip-button-animation-play.png"）、線形グラデーション（＃FF6366 50％、＃FEA56E）;裏面の視認性：隠されています。変換：translateZ（10px）; .flipBtn_back background-image：url（ "image / css-3d-flip-button-animation-pause.png"）、線形グラデーション（＃FF6366 50％、＃FEA56E）;背景色：ブルー。変換：translateZ（-10px）; .flipBtn_mid 高さ：20ピクセル;背景色：＃d5485a。 transformX（90deg）;上：-10ピクセル

に スペースを覆う 前面と背面の真ん中の面の間に、 真ん中の面を平らに置く を使用して3D空間のx平面全体で transformX（90deg）; それを支配する 垂直にする y平面の前面ボタンと背面ボタンの両方に.

真ん中の面はx平面を横切って平らに置かれていたので、y軸上のその上の点はオリジナルから10px（高さの半分）下がります。それで、それを引き上げて、他の2つのボタン面とその上部を揃えるために、 上：-10ピクセル 同様に支配する.

私は使った 裏面の視認性 前面のCSSプロパティ。ボタンを反転したときに、前面の背面は表示されません。.

これまでのところ、x平面はビューから隠されていて、y平面（画面）では最後に置かれた面が前面であるため、画面には正面しか見えません。. ボタンを回転させる あなたは他の顔も見ることができるでしょう.

4.ボタンを回転させる

トランスフォームスタイルのCSSプロパティは、HTML要素の子要素をフラットに表示するか、3D空間に配置するかを決定します。以下のコードスニペットでは、 変換スタイル：preserve-3d; ルールは私たちのボタンに3Dボリュームを与えますが、 transformx（）を変換します。 プロパティはX軸を中心に回転させます.

 .flipBtn 変換スタイル：preserve-3d; transformX（-120deg）;

私が使ったことに注意してください -120度 この方法ではボタンの回転がどのように機能するかを説明するのが簡単なので、デモ目的のためだけに.

しかし、次のステップでそれをに変更します。 -180度 ボタンを完全にひっくり返す.

5.ボタンをアニメートする

この時点では、3Dボタンはまだアニメーション化されていません。これを使用してこれを行うことができます 遷移 財産。私達は使用します 変形する これは遷移効果を適用したいプロパティです。 2番目の値は期間です。, 2秒.

ボタンをホバー時にのみ回転させるようにしましょう。 .flipBtn セレクタ、使ってみよう .flipBtnWrapper：ホバー.flipBtn. 前述のように、の値も変更します。 rotateX（） に -180度 ボタンを反転させる.

 .flipBtn 遷移：変換2秒;変換スタイル：preserve-3d; .flipBtnWrapper：hover .flipBtn transform：rotateX（-180deg）;

Githubリポジトリで、私は 各ボタンにチェックボックスを追加 上のアニメーションを起動するために ：チェックあり ではなく ホバー, このようにそれは本当のボタンのように振る舞います。また、上下左右に4つのボタン（上下→左右→左右→左右）が付いているので、どちらでも簡単に使えます。.

デモを見る
ソースをダウンロード