3D回転しながら開閉するモーダルウインドウを作る方法
モーダルウインドウは、ページを移動せずに補足情報や確認内容などを画面上へ表示できるUIです。通常の表示・非表示だけでなく、開閉時にアニメーションを加えることで、モーダルが表示されたことを視覚的に分かりやすく伝えられます。今回は、モーダルウインドウが立体的に回転しながら開閉する3D回転アニメーションを実装します。
「モーダルを開く」をクリックすると、傾いた小さな状態のモーダルが3D回転しながら画面中央へ表示されます。「閉じる」をクリックすると逆方向へ回転しながら非表示になります。CSSのperspective()とrotate3d()を使用することで、通常の平面的な回転とは異なる奥行きのある動きを表現しています。
商品やサービスの案内、会員サイトのお知らせ、管理画面の確認内容など、通常のモーダルよりも動きに特徴を持たせたい場面で利用できます。HTMLでモーダルの内容を用意し、CSSで3D回転アニメーションを設定し、JavaScriptではクラスを追加・削除するだけのシンプルな構成です。画面幅が640px以下の場合は余白を調整し、スマートフォンでも確認しやすい表示にしています。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
モーダルを開くと立体的に回転しながら表示され、閉じると逆方向へ回転しながら非表示になります。
モーダルが立体的に回転しながら開閉する動作を確認できます。
「モーダルを開く」をクリックすると3D回転しながら表示され、「閉じる」をクリックすると逆方向へ3D回転しながら閉じます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン表示に対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>3D回転モーダルウインドウ</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- デモ全体 -->
<div class="modal-3d-rotate_wrap">
<!-- タイトル -->
<h1 class="modal-3d-rotate_title">
3D回転モーダルウインドウ
</h1>
<!-- 説明文 -->
<p class="modal-3d-rotate_text">
モーダルを開くと立体的に回転しながら表示され、閉じると逆方向へ回転しながら非表示になります。
</p>
<!-- モーダルを開くボタン -->
<button class="modal-3d-rotate_open" type="button" data-modal-3d-rotate-open="">
モーダルを開く
</button>
</div>
<!-- モーダル本体 -->
<div class="modal-3d-rotate_modal" role="dialog" aria-modal="true" aria-labelledby="modal-3d-rotate-title" data-modal-3d-rotate-modal="">
<!-- モーダルタイトル -->
<div class="modal-3d-rotate_modal-title" id="modal-3d-rotate-title">
モーダルタイトル
</div>
<!-- モーダル本文 -->
<p class="modal-3d-rotate_modal-text">
モーダルが立体的に回転しながら開閉する動作を確認できます。
</p>
<!-- モーダルを閉じるボタン -->
<button class="modal-3d-rotate_close" type="button" data-modal-3d-rotate-close="">
閉じる
</button>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでモーダルウインドウを配置し、CSSで画面中央への配置と3D回転アニメーションを設定します。JavaScriptでは「モーダルを開く」「閉じる」のクリックに合わせて表示用クラスを追加・削除します。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlは3D回転モーダルウインドウを構成するファイルです。タイトル・説明文・「モーダルを開く」ボタンと、画面中央へ表示するモーダルタイトル・本文・「閉じる」ボタンを配置しています。index.htmlからstyle.cssとscript.jsを読み込んで使用します。
style.cssは通常画面とモーダルウインドウのデザイン、画面中央への配置、3D回転アニメーションを設定するファイルです。初期状態ではvisibility:hidden;とopacity:0;でモーダルを非表示にし、perspective()とrotate3d()によって奥行きのある回転状態を作ります。is-activeクラスが追加されると回転角度と大きさが通常の状態へ変化しながら表示されます。
script.jsはモーダルウインドウの表示・非表示を切り替えるファイルです。「モーダルを開く」をクリックするとis-activeクラスを追加し、「閉じる」をクリックすると同じクラスを削除します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。index.htmlからstyle.cssとscript.jsが読み込まれます。「モーダルを開く」をクリックすると、モーダルが小さく傾いた状態から3D回転しながら画面中央へ表示されます。「閉じる」をクリックすると逆方向へ3D回転しながら非表示になります。
カスタマイズできる内容
index.htmlでは通常画面のタイトル・説明文、モーダルのタイトル・本文、開くボタンと閉じるボタンの文字を変更できます。style.cssではモーダルの横幅、余白、角丸、影、3D回転の角度、奥行き、拡大率、アニメーション時間などを変更できます。特にperspective()、rotate3d()、scale()を調整することで、3D回転の見え方を変更できます。
数値調整
style.css
max-width:700px;
通常画面の表示エリアの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:32px;
通常画面の内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると狭くなります。
border-radius:18px;
通常画面とモーダルウインドウの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
width:calc(100% - 40px);
モーダルウインドウの横幅です。画面幅から40pxを引くことで、左右に合計40pxの余白を確保します。40pxを大きくすると画面端との余白が広がります。
max-width:420px;
モーダルウインドウの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:28px;
モーダルウインドウの内側余白です。値を大きくすると内容と外周の間隔が広がり、小さくすると狭くなります。
perspective(1200px)
3D回転の奥行きを表す値です。値を小さくすると遠近感が強くなり、大きくすると遠近感が弱くなります。
rotate3d(1,1,0,-120deg)
モーダルの初期回転状態です。1,1,0でX軸とY軸を組み合わせた回転軸を指定し、-120degで回転角度を指定しています。角度の絶対値を大きくすると回転量が増え、小さくすると回転量が減ります。
scale(.65)
非表示時のモーダルの大きさです。.65は通常サイズの65%を表します。値を小さくすると、より小さな状態から表示されます。
transform .65s
3D回転と拡大・縮小にかかる時間です。値を大きくするとゆっくり回転し、小さくすると速く回転します。
opacity .35s
透明度が変化する時間です。値を大きくするとゆっくり表示・非表示になり、小さくすると素早く変化します。
box-shadow:0 20px 40px rgba(0,0,0,.2);
モーダルウインドウの影です。20pxを大きくすると影が下方向へ移動し、40pxを大きくするとぼかしが広がります。最後の.2を大きくすると影が濃くなります。
レスポンシブ対応
モーダル本体にはwidth:calc(100% - 40px);とmax-width:420px;を設定しているため、画面幅が狭い場合でも左右に余白を残して表示されます。さらに画面幅が640px以下になると、メディアクエリによって通常画面の内側余白を24px 18px、モーダル本体の内側余白も24px 18pxへ変更し、スマートフォンでも内容を確認しやすい表示に調整します。
コメント