マウスドラッグで上下左右に自由に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などすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではカードの表面と裏面を配置し、CSSではカードのデザインや3D表示を設定します。JavaScriptではマウスドラッグの操作を取得し、上下左右へ自由に360度回転する処理を実装しています。外部ライブラリを使用せず、3つのファイルだけで立体的なカードを実現できます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはカード全体の構造を作成するファイルです。表面・裏面のタイトルや説明文を自由に変更できます。
style.cssはカードの大きさ、背景色、文字色、角丸、影、3D表示などのデザインを設定するファイルです。
script.jsはマウスドラッグを取得し、ドラッグした方向へカードを360度自由に回転させる処理を担当します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。カードをドラッグすると上下左右へ自由に回転し、360度回転させることで裏面も確認できます。
カスタマイズできる内容
index.htmlではカードのタイトルや説明文を自由に変更できます。
style.cssではカードの横幅、高さ、背景色、文字色、角丸、影などを用途に合わせて調整できます。
script.jsでは回転方向や回転量など、ドラッグ時の動作を変更できます。
数値調整
style.css
width:320px;
カードの横幅です。値を大きくすると横長になり、小さくするとコンパクトになります。
height:220px;
カードの高さです。値を大きくすると縦に大きくなり、小さくすると低く表示されます。
padding:28px 24px;
カード内側の余白です。値を大きくすると文字との間隔が広がります。
border-radius:18px;
カードの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
perspective:1200px;
3D表示の奥行きです。値を小さくすると立体感が強くなり、大きくすると控えめになります。
script.js
rotateY += event.clientX - startX;
左右方向の回転量です。加算量を大きくすると左右へ速く回転し、小さくするとゆっくり回転します。
rotateX -= event.clientY - startY;
上下方向の回転量です。加算量を変更すると上下方向の回転速度を調整できます。
レスポンシブ対応
このサンプルはFlexboxを使用してカードを中央へ配置しています。表示エリアには左右の余白を確保しているため、スマートフォン・タブレット・PCでも利用しやすいレイアウトになっています。
コメント