マウスドラッグで上下左右に自由に360度回転できるカードを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

カードUI

マウスドラッグで上下左右に自由に360度回転できるカードを作る方法

マウスドラッグで上下左右に自由に360度回転できるカードを作る方法を紹介します。カードをドラッグすると、マウスの動きに合わせて上下左右へ回転し、表面だけでなく裏面も確認できるカードUIを作成できます。商品カード、プロフィールカード、キャラクターカード、作品紹介など、カードを立体的に見せたい場面に使いやすい実装です。

このサンプルでは、HTMLでカードの表面と裏面を用意し、CSSで3D回転と裏面表示を設定します。JavaScriptでは、ドラッグ中のマウス移動量を取得し、rotateX()とrotateY()の角度へ反映することで、カードを上下左右に自由に回転できるようにしています。

カードの表面と裏面の内容、背景色、サイズ、角丸、影、回転の感度などは自由に変更できます。マウス操作でカードをぐるっと回せるため、通常のカードUIよりも動きが分かりやすく、ユーザーに触って確認してもらうような演出にも向いています。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

表面

カードをドラッグして自由に回転できます。

裏面

360度回転させると裏面も確認できます。

このデモでは、カードをドラッグすると上下左右へ360度回転します。表面と裏面を用意しているため、裏側まで自然に表示できます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>マウスドラッグで上下左右に自由に360度回転できるカードを作る方法</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- カード表示エリア -->
  <div class="rotate-360-card_demo">

    <!-- ドラッグで回転するカード -->
    <div class="rotate-360-card_card">

      <!-- 回転する本体 -->
      <div class="rotate-360-card_inner">

        <!-- 表面 -->
        <div class="rotate-360-card_front">

          <h3>表面</h3>

          <p>
            カードをドラッグして自由に回転できます。
          </p>

        </div>

        <!-- 裏面 -->
        <div class="rotate-360-card_back">

          <h3>裏面</h3>

          <p>
            360度回転させると裏面も確認できます。
          </p>

        </div>

      </div>

    </div>

  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3つのファイルで構成されています。HTMLではカードの表面と裏面を用意し、CSSでは3D回転やデザインを設定しています。JavaScriptではマウスドラッグの移動量を取得し、カードを上下左右へ自由に360度回転させる処理を行っています。 

sample/
├── index.html
├── style.css
└── script.js

sampleフォルダ内に各ファイルを配置し、ブラウザでsample/index.htmlを開くと動作を確認できます。カードの表面・裏面の内容はindex.html、カードのサイズ・色・角丸・影などのデザインはstyle.cssから変更できます。また、script.jsではドラッグ時の回転処理を行っているため、回転速度や回転量を変更することで好みの操作感に調整できます。

コメント