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

モーダルウインドウ
2026.07.14

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

3D回転しながら開閉するモーダルウインドウを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用して、モーダルウインドウが立体的に回転しながら表示・非表示になるアニメーションを実装します。通常のフェード表示とは異なり、奥行きを感じられる動きになるため、ユーザーの目を引く演出として利用できます。

お知らせやキャンペーン情報、会員サイトの案内、ECサイトのクーポン表示、管理画面の確認ダイアログなど、重要な情報を印象的に表示したい場面で活用できます。モーダルを開くと斜め方向へ3D回転しながら表示され、閉じるボタンを押すと逆方向へ回転しながら閉じるため、自然で滑らかな動きを実現できます。

タイトルや本文、ボタンの文字はHTMLから変更でき、CSSではモーダルのサイズ、背景色、角丸、影、回転角度、アニメーション時間などを自由に調整できます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCでも利用しやすく、印象的なモーダルウインドウを作成したい場合に活用できるサンプルです。

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

デモ

3D回転モーダルウインドウ

モーダルが3D回転しながら表示・非表示になります。

「モーダルを開く」をクリックすると、モーダルが3D回転しながら表示されます。「閉じる」をクリックすると逆方向へ回転しながら閉じます。

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

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

  <!-- 文字コードをUTF-8へ設定 -->
  <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">

    <!-- タイトル -->
    <div class="modal-3d-rotate_title">
      3D回転モーダルウインドウ
    </div>

    <!-- 説明文 -->
    <p class="modal-3d-rotate_text">
      モーダルが3D回転しながら表示・非表示になります。
    </p>

    <!-- モーダルを開くボタン -->
    <button
      class="modal-3d-rotate_open"
      type="button">
      モーダルを開く
    </button>

  </div>

  <!-- モーダル全体 -->
  <div class="modal-3d-rotate_overlay">

    <!-- モーダル本体 -->
    <div
      class="modal-3d-rotate_modal"
      role="dialog"
      aria-modal="true"
      aria-labelledby="modal-3d-rotate-title">

      <!-- モーダルタイトル -->
      <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">
        閉じる
      </button>

    </div>

  </div>

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

</body>
</html>
コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではモーダルウインドウの構造を作成し、CSSでは3D回転アニメーションやデザイン、JavaScriptではモーダルの表示・非表示を制御します。CSSの3D変形機能を利用することで、通常のフェード表示とは異なる立体感のあるモーダルウインドウを実装できます。 

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

各ファイルの役割
index.htmlはモーダルウインドウ全体を構成するファイルです。タイトル、説明文、ボタンの文字、モーダル内の文章などを変更できます。

style.cssはページ全体とモーダルウインドウのデザインを設定するファイルです。背景色、サイズ、角丸、影、3D回転アニメーション、表示速度などを変更できます。

script.jsはモーダルウインドウの表示・非表示を制御するファイルです。開くボタンをクリックすると3D回転しながら表示され、閉じるボタンをクリックすると逆方向へ回転しながら閉じます。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。「モーダルを開く」をクリックすると3D回転アニメーション付きでモーダルが表示され、「閉じる」をクリックするとモーダルが非表示になります。

カスタマイズできる内容
index.htmlではタイトル、説明文、ボタンの文字、モーダル内のタイトルや本文を変更できます。

style.cssではモーダルの横幅、背景色、余白、角丸、影、背景オーバーレイの色、回転角度、拡大率、アニメーション時間などを変更できます。3D回転の方向や見え方も自由に調整できます。

script.jsでは開閉する対象やイベント処理を変更できます。

数値調整
style.css
max-width:700px;
全体エリアの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

padding:32px;
全体エリアの内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。

perspective:1200px;
3D表示の奥行きです。値を小さくすると立体感が強くなり、大きくすると自然な見た目になります。

max-width:420px;
モーダルの最大横幅です。値を大きくするとモーダルが横に広がります。

padding:30px;
モーダル内部の余白です。値を大きくすると内容と枠線の間隔が広がります。

rotate3d(1,1,0,-120deg)
モーダルが表示される前の回転角度です。角度を変更すると3D回転の見え方が変わります。

scale(.65)
モーダルの初期サイズです。値を小さくすると小さい状態から表示され、大きくすると通常サイズに近い状態から表示されます。

transform .65s
3D回転アニメーションの時間です。値を大きくするとゆっくり、小さくすると速く回転します。

opacity .35s
フェードイン・フェードアウトの時間です。値を大きくすると透明度の変化がゆっくりになります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-widthにより画面幅へ合わせて自動調整されます。また、640px以下ではpadding:24px 18px;へ変更して余白を調整しているため、スマートフォン・タブレット・PCで利用できます。

こちらもおすすめ

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

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

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

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

トップページで探す！

コメント