3D回転しながら開閉するモーダルウインドウの作り方【HTML/CSS/JavaScript・サンプルコード付き】

モーダルウインドウ

3D回転しながら開閉するモーダルウインドウの作り方

3D回転しながら開閉するモーダルウインドウの作り方を紹介します。通常のフェード表示やスライド表示とは異なり、立体的に回転しながら表示・非表示が切り替わるため、印象的なUIを簡単に実装できます。商品紹介やギャラリー、キャンペーン案内など、ユーザーの目を引きたい場面にも適しています。

このサンプルでは、HTML・CSS・JavaScriptだけを使用して、モーダルウインドウを3D回転アニメーション付きで表示します。開くときは奥から手前へ回転しながら現れ、閉じるときは逆方向へ回転しながら非表示になります。外側クリックや閉じるボタンにも対応しているため、実用的なサンプルとして利用できます。

デザインや色、サイズ、アニメーション速度、回転角度などはコード内の値を変更するだけで自由にカスタマイズできます。立体感のあるモーダルウインドウを導入したい場合や、一般的なモーダルよりも演出を強化したい場合に活用してください。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
ご利用によって発生した損害・トラブル等については責任を負いかねますのでご了承ください。

デモ

3D回転モーダル

「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>

  <!-- 3D回転モーダルを開く操作エリア -->
  <div class="three-d-rotate-modal-window_wrap">

    <!-- 操作エリアのタイトル -->
    <div class="three-d-rotate-modal-window_title">
      3D回転モーダル
    </div>

    <!-- 操作エリアの説明文 -->
    <p class="three-d-rotate-modal-window_text">
      「3Dモーダルを開く」をクリックすると、立体的に回転しながら表示されます。
    </p>

    <!-- 3D回転モーダルを開くボタン -->
    <button
      class="three-d-rotate-modal-window_open"
      type="button"
      data-three-d-rotate-modal-window-open>
      3Dモーダルを開く
    </button>

  </div>

  <!-- モーダル背景 -->
  <div
    class="three-d-rotate-modal-window_overlay"
    data-three-d-rotate-modal-window-overlay>

    <!-- 3D回転するモーダル本体 -->
    <div
      class="three-d-rotate-modal-window_modal"
      role="dialog"
      aria-modal="true"
      aria-labelledby="three-d-rotate-modal-window-title">

      <!-- モーダル右上の閉じるボタン -->
      <button
        class="three-d-rotate-modal-window_close"
        type="button"
        data-three-d-rotate-modal-window-close
        aria-label="閉じる">
        ×
      </button>

      <!-- モーダルタイトル -->
      <div
        class="three-d-rotate-modal-window_heading"
        id="three-d-rotate-modal-window-title">
        3Dモーダル
      </div>

      <!-- モーダルの説明文 -->
      <p class="three-d-rotate-modal-window_message">
        奥から手前へ立体的に回転しながら表示されています。
      </p>

      <!-- モーダル下部の閉じるボタン -->
      <button
        class="three-d-rotate-modal-window_button"
        type="button"
        data-three-d-rotate-modal-window-button>
        閉じる
      </button>

    </div>

  </div>

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

</body>
</html>

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。3D回転アニメーションを使って、モーダルウインドウが奥から手前へ回転しながら表示される演出を実装しています。JavaScriptはモーダルの開閉制御のみを担当し、見た目やアニメーションはCSSで管理しています。

ファイルごとに役割を分けているため、デザインだけ変更したい場合はCSS、表示内容を変更したい場合はHTML、開閉動作を変更したい場合はJavaScriptというように、編集箇所が分かりやすい構成になっています。

サンプルはそのままブラウザで動作確認できます。タイトル・説明文・ボタン・色・アニメーション速度なども自由に変更できるため、自分のサイトに合わせた3Dモーダルへ簡単にカスタマイズできます。 

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

各ファイルの役割
index.html
モーダル本体、タイトル、説明文、開くボタン、閉じるボタンを配置しています。表示する文章やボタン名を変更できます。

style.css
モーダルのデザイン、背景色、角丸、影、3D回転アニメーション、表示位置、レスポンシブ表示を管理しています。見た目を変更したい場合はこのファイルを編集します。

script.js
モーダルの表示・非表示、背景クリックによる閉じる処理、ボタン操作を管理しています。

設置方法・使い方
sampleフォルダ内の3ファイルを同じ場所へ保存します。
index.htmlをブラウザで開くとサンプルを確認できます。
「3Dモーダルを開く」ボタンをクリックすると、立体的に回転しながらモーダルウインドウが表示されます。

カスタマイズできる内容
index.htmlではタイトル、説明文、ボタン名を変更できます。
style.cssでは背景色、文字色、角丸、余白、影、モーダルサイズ、3D回転演出などを変更できます。
script.jsでは開閉処理や背景クリック時の動作を変更できます。

数値調整
style.css
transition:.55s;
0.55秒で3D回転アニメーションを実行します。値を大きくするとゆっくり、小さくすると速くなります。

style.css
perspective:1000px;
3D演出の奥行きを指定しています。値を小さくすると立体感が強くなり、大きくすると遠近感が弱くなります。

style.css
transform:rotateX(-75deg) rotateY(35deg) scale(.7);
モーダルの初期角度と拡大率です。回転角度やscaleの値を変更すると3D演出が変化します。

レスポンシブ対応
style.cssでレスポンシブ対応しています。
max-width:430pxで画面幅に合わせて縮小表示し、640px以下ではpaddingを調整してスマートフォンでも見やすいレイアウトになります。PC・タブレット・スマートフォンで利用できます。

こちらもおすすめ

モーダルウインドウ
モーダルウインドウのサンプルコード一覧

この記事の他にも、コピペですぐ使える実用的なサンプルコードを掲載しています。デモを確認しながら、用途に合うコードを探せます。

その他のコードを探す
トップページ
コピペですぐ使えるサンプルコードを探す

実用的なサンプルコードをカテゴリ・新着記事・人気記事から探せます。用途に合ったコードを見つけて、そのままコピペで利用できます。

トップページで探す！

コメント