3D表示で中央の画像を強調するカルーセルを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

カルーセル
2026.07.03

3D表示で中央の画像を強調するカルーセルを作る方法

3D表示で中央の画像を強調するカルーセルを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptのみを使用して、中央の画像を大きく表示し、左右の画像を奥行きのある3D表現で配置するカルーセルを作成します。前へ・次へボタンをクリックすると画像がスライドし、中央の画像が切り替わるたびに立体感のある表示を確認できます。

商品紹介、制作実績、ギャラリー、旅行写真、ポートフォリオなど、複数の画像を印象的に見せたい場面で活用できます。中央の画像は拡大表示と影によって強調され、左右の画像はY軸方向へ回転して奥行きを演出するため、一般的なカルーセルよりも視線を中央へ集めやすいデザインです。外部ライブラリは使用せず、JavaScriptだけで画像の表示位置を切り替えています。

HTMLでは画像やalt属性を変更でき、CSSでは画像サイズ、回転角度、拡大率、影、角丸、アニメーション速度などを調整できます。JavaScriptでは表示順を切り替える処理を行っており、画像枚数を増減しても利用できます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用しやすい3Dカルーセルのサンプルとして活用できます。

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

デモ

画像1
画像2
画像3
画像4
画像5
画像6

「前へ」「次へ」をクリックすると横長の画像が切り替わり、中央の画像が拡大表示され、左右の画像は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-center-image-carousel_demo">

    <!-- 画像表示エリア -->
    <div class="three-d-center-image-carousel_view">

      <!-- 画像を重ねて配置するエリア -->
      <div class="three-d-center-image-carousel_track">

        <!-- 画像1：imagesフォルダに配置した画像ファイル名へ変更 -->
        <div class="three-d-center-image-carousel_slide">
          <img src="images/【配置した画像のファイル名1】" alt="画像1">
        </div>

        <!-- 画像2：imagesフォルダに配置した画像ファイル名へ変更 -->
        <div class="three-d-center-image-carousel_slide">
          <img src="images/【配置した画像のファイル名2】" alt="画像2">
        </div>

        <!-- 画像3：imagesフォルダに配置した画像ファイル名へ変更 -->
        <div class="three-d-center-image-carousel_slide">
          <img src="images/【配置した画像のファイル名3】" alt="画像3">
        </div>

        <!-- 画像4：imagesフォルダに配置した画像ファイル名へ変更 -->
        <div class="three-d-center-image-carousel_slide">
          <img src="images/【配置した画像のファイル名4】" alt="画像4">
        </div>

        <!-- 画像5：imagesフォルダに配置した画像ファイル名へ変更 -->
        <div class="three-d-center-image-carousel_slide">
          <img src="images/【配置した画像のファイル名5】" alt="画像5">
        </div>

        <!-- 画像6：imagesフォルダに配置した画像ファイル名へ変更 -->
        <div class="three-d-center-image-carousel_slide">
          <img src="images/【配置した画像のファイル名6】" alt="画像6">
        </div>

      </div>

    </div>

    <!-- 前へ・次へボタン -->
    <div class="three-d-center-image-carousel_buttons">

      <!-- 前へボタン -->
      <button
        type="button"
        id="three-d-center-image-carousel-prev"
        aria-label="前へ">
        前へ
      </button>

      <!-- 次へボタン -->
      <button
        type="button"
        id="three-d-center-image-carousel-next"
        aria-label="次へ">
        次へ
      </button>

    </div>

  </div>

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

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではカルーセル全体と画像を配置し、CSSでは3D表示や中央画像の強調表示、左右画像の回転やレスポンシブ対応を設定しています。JavaScriptでは前へ・次へボタンの操作に合わせて表示位置を切り替え、中央画像を基準に左右の画像を3D表示するカルーセルを実現しています。 

sample/
├── index.html
├── style.css
├── script.js
└── images/
    ├── image1.jpg
    ├── image2.jpg
    ├── image3.jpg
    ├── image4.jpg
    ├── image5.jpg
    └── image6.jpg

各ファイルの役割
index.htmlはカルーセル全体を構成するファイルです。表示する画像、画像枚数、代替テキスト、前へ・次へボタンを編集できます。画像はsample/imagesフォルダへ配置し、ファイル名を書き換えるだけで利用できます。

style.cssはカルーセルのデザインを設定するファイルです。画像サイズ、3D回転の角度、中央画像の拡大率、余白、影、角丸、ボタンのデザイン、レスポンシブ表示などを変更できます。

script.jsはカルーセルの動作を制御するファイルです。前へ・次へボタンの処理や中央・左右・待機画像の表示位置を切り替えています。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、画像はsample/imagesフォルダへ保存します。index.html内の画像ファイル名を実際のファイル名へ変更したあと、sample/index.htmlをブラウザで開くと利用できます。前へ・次へボタンを押すと画像が切り替わり、中央画像が強調表示された3Dカルーセルを確認できます。

カスタマイズできる内容
index.htmlでは表示する画像、画像枚数、alt属性を変更できます。用途に合わせて商品画像、制作実績、観光写真、ギャラリーなどへ利用できます。

style.cssでは画像サイズ、中央画像の拡大率、左右画像の3D回転角度、透明度、影、角丸、ボタンのサイズや色、カルーセル全体の余白などを自由に調整できます。

script.jsでは初期表示する画像や画像の切り替え順を変更できます。

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

height:260px;
表示エリアの高さです。値を大きくすると画像表示エリアが高くなります。

width:31%;
PC表示時の画像幅です。値を大きくすると画像が大きく表示されます。

height:240px;
画像の高さです。値を変更すると画像の縦サイズが変わります。

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

rotateY(45deg)
左右画像の回転角度です。値を大きくすると斜め向きが強くなり、小さくすると正面に近づきます。

scale(1.08)
中央画像の拡大率です。値を大きくすると中央画像がより強調され、小さくすると他の画像との差が少なくなります。

transition:.55s;
画像が切り替わるアニメーション時間です。値を大きくするとゆっくり、小さくすると素早く切り替わります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:31%やメディアクエリにより、タブレットでは画像サイズと回転角度を調整し、スマートフォンでは中央画像のみを表示するレイアウトへ切り替わります。そのため、スマートフォン・タブレット・PCのいずれでも見やすく利用できます。

こちらもおすすめ

カルーセル
カルーセルのサンプルコード一覧

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

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

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

トップページで探す！

コメント