JavaScript

【JavaScript】クリックでカードを反転させる方法！【コピペOK】

クリックで画像を反転させよう

今回は、カードをひっくり返すようなアニメーションの作成方法について紹介します。
このようなデザインは、ユーザー体験を向上させ、楽しさを提供するのに役立ちます。

ニャンコ
ニャンコ

今回は、カードをひっくり返すようなアニメーションの作成方法について紹介します。
このようなデザインは、ユーザー体験を向上させ、楽しさを提供するのに役立ちます。

こういうところで使ったらどうでしょう
というサンプルも用意してますので、是非色々試してみてください。

ワンコ
ワンコ

ひっくり返しアニメーションサンプル

今回作成するのがこのようなものです。
カードをクリックすると、カードの裏表がひっくり返る3Dアニメーションです。
まるで本物カードをひっくり返してるようですね。

See the Pen Untitled by kokusyo (@kokusyo) on CodePen.

コード解説

まずは、上記カードのコードです。
JavaScriptはクリックでクラスを付与してるだけなので、今回のポイントはCSSです。

HTML

<div class="card">
    <div class="card-inner">
        <div class="card-front">
            <img src="image1.png" alt="表面の画像">
        </div>
        <div class="card-back">
            <img src="image2.png" alt="裏面の画像">
        </div>
    </div>
</div>

JavaScript

// カードをクリックしたら反転させる
document.querySelector('.card').addEventListener('click', function() {
    this.classList.toggle('is-flipped');
});

CSS

.card {
    width: 300px;
    height: 200px;
    perspective: 1000px; /* 3D効果を与える */
}

.card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    transform-origin: center; /* 中心を基準に回転 */
}

.card.is-flipped .card-inner {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* 裏面が透けないようにする */
    top: 0;
    left: 0;
}

.card-front {
    background-color: #fff;
}

.card-back {
    background-color: #fff;
    transform: rotateY(180deg);
}

CSSでカードをひっくり返す際に使われる3D回転アニメーションのポイントを解説します。
ここでは、以下の3つのプロパティが重要です：

  1. perspective: 1000px;
  2. transform-style: preserve-3d;
  3. transform: rotateY(180deg);

これらのプロパティがどのように働いて、カードが3Dで回転するかをわかりやすく説明していきます。

perspective

perspectiveは、3D効果を与えるためのプロパティです。この値によって、どれくらいの奥行き感を持たせるかが決まります。
具体的には、「視点と要素（カード）との距離」をピクセル単位で指定します。

視点（カメラの位置）とカード（要素）の間の距離だと考えてください。
値が小さいほど、カードが手前に浮かび上がるように見え、3D効果が強くなります。逆に値が大きいと、遠くから見ているように感じ、3D効果は少し控えめになります。

ワンコ
ワンコ

試しにperspectiveの値を150pxにして見ました。
物凄く近くで見てるようなアニメーションになりました。

See the Pen Untitled by kokusyo (@kokusyo) on CodePen.

transform-style: preserve-3d

transform-style は、3D空間での変形を適用する際に使われます。preserve-3d は、要素が回転する際に、3Dの効果を保持するために必要なプロパティです。

カードの表と裏が回転しても、それぞれが3D空間上で正しく見えるようにするために使います。もしこのプロパティを指定しなかった場合、回転した際に裏面が正しく見えず、2Dの平面的な動きになってしまいます。

See the Pen Untitled by kokusyo (@kokusyo) on CodePen.

transform: rotateY(180deg)

transform プロパティは、要素を変形（トランスフォーム）させるために使います。
rotateYは、Y軸（縦軸）を中心に回転させる動作です。値を 180deg にすると、要素が縦軸を中心に180度回転します。

  • Y軸は垂直に立っている軸だと考えてください。その軸を中心にカードがくるっと回転します。
  • 180度回転することで、カードの表面が裏側に回って、裏面が表示されます。
ワンコ
ワンコ
  • Y軸は垂直に立っている軸だと考えてください。その軸を中心にカードがくるっと回転します。
  • 180度回転することで、カードの表面が裏側に回って、裏面が表示されます。

導入サンプル例

商品のパッケージの裏表

商品パッケージの裏表やをクリックで切り替え。

See the Pen Untitled by kokusyo (@kokusyo) on CodePen.

クイズ

画像だけでなく、応用してHTMLタグも反転可能です。
それを利用して、クイズ形式は如何でしょうか？
裏面に答えを配置することで、クリックして答えを表示という動きができます。

See the Pen Untitled by kokusyo (@kokusyo) on CodePen.

商品説明

表面に商品の画像と名前。
裏面に、商品のスペックを配置。気になる商品の詳細をすぐに確認できます。

See the Pen Untitled by kokusyo (@kokusyo) on CodePen.

入力フォーム

フォームパーツを配置して入力フォームを作成しました。
入力後に回転させれば、入力漏れも防げるかも。。

See the Pen Untitled by kokusyo (@kokusyo) on CodePen.

まとめ

今回紹介した「ひっくり返る入力フォーム」は、ユーザーにインタラクティブで視覚的に楽しめる体験を提供する手法です。従来のシンプルなフォームと違い、情報を段階的に入力させることで、入力の手間を感じさせずに完了させることができます。

フォームのデザインやアニメーションを工夫することで、サイト全体の印象やユーザー体験を大きく向上させることができます。ぜひこの手法を活用して、オリジナルのインタラクティブなフォームを作成してみてください！

-JavaScript
-, , ,