この記事にはプロモーションが含まれています。

【コピペOK】3Dタブアニメーション｜5種類【Web制作】

2025-08-062025-08-07

ケケンタ

3Dタブアニメーションを実装したい……

ケケンタ

立体的で魅力的なタブ効果を作りたい……

今回はこのようなお悩みをお持ちの方へ向けて

Web制作において必須のUI要素
3Dタブアニメーション

をご紹介します。

5種類のアニメーション効果を完全網羅した実装なので、いままさに「3Dタブを実装しないといけない！」という方は丸っとコピペしてどうぞご活用ください！

この記事で紹介する3Dタブアニメーション

3Dフリップ効果
3Dティルト効果（3D傾斜）
3Dローテーション効果（3D回転）
3Dスライド効果
3Dスケール効果（3D拡大/縮小）

ケケンタ

特にプレミアムサイトやエンターテイメントサイトには、3Dタブアニメーションが非常に効果的です。この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです。

なお、今回ご紹介するアニメーションはCSSとJavaScriptで実装できるので、基本的なコーディング知識があれば安心してご利用いただけます。

あわせて読みたい

【コピペOK】タブ切り替えアニメーション｜6種類【Web制作】

【コピペOK】ミニマルタブアニメーション｜5種類【Web制作】

【Web制作】メニューアニメーション完全版｜8カテゴリ・40種類を網羅

Webアニメーションの引き出しを増やすのにおすすめの書籍

動くWebデザインアイディア帳

created by Rinker

¥1,399 (2025/08/12 08:44:59時点 Amazon調べ-詳細)

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら

連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

Laravelの教科書バージョン10対応【Laravel11サポートガイドあり】

created by Rinker

¥1,499 (2025/08/12 03:12:59時点 Amazon調べ-詳細)

3Dタブアニメーションとは

3Dタブアニメーションは、立体的な効果を使用してタブの切り替えやインタラクションを表現するアニメーション効果です。ユーザーに視覚的なインパクトを与え、モダンで洗練された印象を提供する効果的な手法です。

効果的な使用場面

適している場面

プレミアムサイト
エンターテイメントサイト
ゲームサイト
ポートフォリオサイト
モダンなWebアプリ

避けるべき場面

ビジネスサイト
情報量の多いサイト
読みやすさを重視するサイト
パフォーマンスを重視するサイト

実装方法の比較

アニメーション	難易度	視覚的インパクト	パフォーマンス	ブラウザ対応
3Dフリップ効果	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐	⭐⭐⭐⭐
3Dティルト効果	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
3Dローテーション効果	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐	⭐⭐⭐
3Dスライド効果	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
3Dスケール効果	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐

3Dフリップ効果

① デモ

See the Pen 3Dタブフリップ by ケケンタ (@lgshifbg-the-looper) on CodePen.

この3Dフリップ効果の特徴

立体的なフリップ動き
視覚的インパクトが高い
モダンな印象

② HTML

<div class="tab-container">
  <div class="tab-buttons">
    <button class="tab-btn active" data-tab="tab1">タブ1</button>
    <button class="tab-btn" data-tab="tab2">タブ2</button>
    <button class="tab-btn" data-tab="tab3">タブ3</button>
  </div>
  
  <div class="tab-content">
    <div class="flip-panel active" id="tab1">
      <div class="flip-card">
        <div class="flip-front">
          <h3>タブ1のコンテンツ</h3>
          <p>3Dフリップ効果のコンテンツです。</p>
        </div>
      </div>
    </div>
    
    <div class="flip-panel" id="tab2">
      <div class="flip-card">
        <div class="flip-front">
          <h3>タブ2のコンテンツ</h3>
          <p>3Dフリップ効果のコンテンツです。</p>
        </div>
      </div>
    </div>
    
    <div class="flip-panel" id="tab3">
      <div class="flip-card">
        <div class="flip-front">
          <h3>タブ3のコンテンツ</h3>
          <p>3Dフリップ効果のコンテンツです。</p>
        </div>
      </div>
    </div>
  </div>
</div>

③ CSS

/* タブコンテナ */
.tab-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Arial', sans-serif;
}

.tab-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
  justify-content: center;
}

.tab-btn {
  padding: 12px 24px;
  border: none;
  background: #f0f0f0;
  color: #333;
  cursor: pointer;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.3s ease;
  position: relative;
}

.tab-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: #667eea;
  transition: width 0.3s ease;
}

.tab-btn.active {
  background: #667eea;
  color: white;
}

.tab-btn.active::after {
  width: 100%;
}

.tab-content {
  position: relative;
  min-height: 300px;
}

.flip-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: rotateY(90deg);
  transition: all 0.6s ease;
}

.flip-panel.active {
  opacity: 1;
  visibility: visible;
  transform: rotateY(0deg);
}

.flip-card {
  position: relative;
  transform-style: preserve-3d;
}

.flip-front {
  position: absolute;
  width: 100%;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: 40px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.flip-front {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  transform: rotateY(0deg);
}

h3 {
  margin: 0 0 20px 0;
  font-size: 28px;
  font-weight: 700;
}

p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const tabButtons = document.querySelectorAll('.tab-btn');
  const tabPanels = document.querySelectorAll('.flip-panel');
  let currentTab = 'tab1';

  tabButtons.forEach(button => {
    button.addEventListener('click', function() {
      const targetTab = this.getAttribute('data-tab');

      if (targetTab === currentTab) return;

      // タブボタンの状態更新
      tabButtons.forEach(btn => btn.classList.remove('active'));
      this.classList.add('active');

      // 3Dフリップアニメーション
      const currentPanel = document.getElementById(currentTab);
      const targetPanel = document.getElementById(targetTab);

      // 現在のタブをフリップアウト
      currentPanel.style.transform = 'rotateY(-90deg)';
      currentPanel.style.opacity = '0';
      currentPanel.style.visibility = 'hidden';

      setTimeout(() => {
        currentPanel.classList.remove('active');

        // ターゲットタブをフリップイン
        targetPanel.classList.add('active');
        targetPanel.style.transform = 'rotateY(0deg)';
        targetPanel.style.opacity = '1';
        targetPanel.style.visibility = 'visible';
      }, 300);

      currentTab = targetTab;
    });
  });
});

⑤ カスタマイズ例

/* フリップ速度の調整 */
.flip-panel {
  transition: all 0.8s ease;
}

/* フリップ軸の変更（X軸） */
.flip-panel {
  transform: rotateX(90deg);
}

.flip-panel.active {
  transform: rotateX(0deg);
}

/* フリップ時の影効果 */
.flip-card {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

3Dティルト効果

① デモ

See the Pen 3Dタブティルト by ケケンタ (@lgshifbg-the-looper) on CodePen.

この3Dティルト効果の特徴

マウス位置に応じた傾斜
インタラクティブな反応
立体的な感覚

② HTML

<div class="tab-container">
  <div class="tab-buttons">
    <button class="tab-btn tilt-btn active" data-tab="tab1">タブ1</button>
    <button class="tab-btn tilt-btn" data-tab="tab2">タブ2</button>
    <button class="tab-btn tilt-btn" data-tab="tab3">タブ3</button>
  </div>

  <div class="tab-content">
    <div class="tilt-panel active" id="tab1">
      <div class="tilt-card">
        <h3>タブ1のコンテンツ</h3>
        <p>3Dティルト効果のコンテンツです。</p>
      </div>
    </div>

    <div class="tilt-panel" id="tab2">
      <div class="tilt-card">
        <h3>タブ2のコンテンツ</h3>
        <p>3Dティルト効果のコンテンツです。</p>
      </div>
    </div>

    <div class="tilt-panel" id="tab3">
      <div class="tilt-card">
        <h3>タブ3のコンテンツ</h3>
        <p>3Dティルト効果のコンテンツです。</p>
      </div>
    </div>
  </div>
</div>

③ CSS

/* タブコンテナ */
.tab-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Arial', sans-serif;
}

.tab-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
  justify-content: center;
}

.tab-btn {
  padding: 12px 24px;
  border: none;
  background: #f0f0f0;
  color: #333;
  cursor: pointer;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.3s ease;
  position: relative;
}

.tab-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: #667eea;
  transition: width 0.3s ease;
}

.tab-btn.active {
  background: #667eea;
  color: white;
}

.tab-btn.active::after {
  width: 100%;
}

.tab-content {
  position: relative;
  min-height: 300px;
}

.tilt-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
}

.tilt-panel.active {
  opacity: 1;
  visibility: visible;
}

.tilt-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.tilt-card:hover {
  transform: perspective(1000px) rotateX(10deg) rotateY(10deg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

h3 {
  margin: 0 0 20px 0;
  font-size: 28px;
  font-weight: 700;
}

p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const tabButtons = document.querySelectorAll('.tab-btn');
  const tabPanels = document.querySelectorAll('.tilt-panel');
  let currentTab = 'tab1';

  // タブ切り替え
  tabButtons.forEach(button => {
    button.addEventListener('click', function() {
      const targetTab = this.getAttribute('data-tab');

      if (targetTab === currentTab) return;

      // タブボタンの状態更新
      tabButtons.forEach(btn => btn.classList.remove('active'));
      this.classList.add('active');

      // パネル切り替え
      tabPanels.forEach(panel => panel.classList.remove('active'));
      document.getElementById(targetTab).classList.add('active');

      currentTab = targetTab;
    });
  });

  // 3Dティルト効果
  const tiltCards = document.querySelectorAll('.tilt-card');

  tiltCards.forEach(card => {
    card.addEventListener('mousemove', function(e) {
      const rect = this.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;

      const centerX = rect.width / 2;
      const centerY = rect.height / 2;

      const rotateX = (y - centerY) / 10;
      const rotateY = (centerX - x) / 10;

      this.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
    });

    card.addEventListener('mouseleave', function() {
      this.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg)';
    });
  });
});

⑤ カスタマイズ例

/* ティルト強度の調整 */
.tilt-card:hover {
  transform: perspective(1000px) rotateX(15deg) rotateY(15deg);
}

/* ティルト時の影効果 */
.tilt-card:hover {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* ティルト速度の調整 */
.tilt-card {
  transition: transform 0.5s ease;
}

3Dローテーション効果

① デモ

See the Pen 3Dタブローテーション by ケケンタ (@lgshifbg-the-looper) on CodePen.

この3Dローテーション効果の特徴

立体的な回転動き
視覚的インパクトが高い
動的な表現

② HTML

<div class="tab-container">
  <div class="tab-buttons">
    <button class="tab-btn active" data-tab="tab1">タブ1</button>
    <button class="tab-btn" data-tab="tab2">タブ2</button>
    <button class="tab-btn" data-tab="tab3">タブ3</button>
  </div>

  <div class="tab-content">
    <div class="rotation-panel active" id="tab1">
      <div class="rotation-card">
        <h3>タブ1のコンテンツ</h3>
        <p>3Dローテーション効果のコンテンツです。</p>
      </div>
    </div>

    <div class="rotation-panel" id="tab2">
      <div class="rotation-card">
        <h3>タブ2のコンテンツ</h3>
        <p>3Dローテーション効果のコンテンツです。</p>
      </div>
    </div>

    <div class="rotation-panel" id="tab3">
      <div class="rotation-card">
        <h3>タブ3のコンテンツ</h3>
        <p>3Dローテーション効果のコンテンツです。</p>
      </div>
    </div>
  </div>
</div>

③ CSS

/* タブコンテナ */
.tab-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Arial', sans-serif;
}

.tab-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
  justify-content: center;
}

.tab-btn {
  padding: 12px 24px;
  border: none;
  background: #f0f0f0;
  color: #333;
  cursor: pointer;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.3s ease;
  position: relative;
}

.tab-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: #667eea;
  transition: width 0.3s ease;
}

.tab-btn.active {
  background: #667eea;
  color: white;
}

.tab-btn.active::after {
  width: 100%;
}

.tab-content {
  position: relative;
  min-height: 300px;
  perspective: 1000px;
}

.rotation-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: rotateY(180deg);
  transition: all 0.8s ease;
  transform-style: preserve-3d;
}

.rotation-panel.active {
  opacity: 1;
  visibility: visible;
  transform: rotateY(0deg);
}

.rotation-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transform-style: preserve-3d;
}

h3 {
  margin: 0 0 20px 0;
  font-size: 28px;
  font-weight: 700;
}

p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const tabButtons = document.querySelectorAll('.tab-btn');
  const tabPanels = document.querySelectorAll('.rotation-panel');
  let currentTab = 'tab1';

  tabButtons.forEach(button => {
    button.addEventListener('click', function() {
      const targetTab = this.getAttribute('data-tab');

      if (targetTab === currentTab) return;

      // タブボタンの状態更新
      tabButtons.forEach(btn => btn.classList.remove('active'));
      this.classList.add('active');

      // 3Dローテーションアニメーション
      const currentPanel = document.getElementById(currentTab);
      const targetPanel = document.getElementById(targetTab);

      // 現在のタブをローテーションアウト
      currentPanel.style.transform = 'rotateY(-180deg)';
      currentPanel.style.opacity = '0';
      currentPanel.style.visibility = 'hidden';

      setTimeout(() => {
        currentPanel.classList.remove('active');

        // ターゲットタブをローテーションイン
        targetPanel.classList.add('active');
        targetPanel.style.transform = 'rotateY(0deg)';
        targetPanel.style.opacity = '1';
        targetPanel.style.visibility = 'visible';
      }, 400);

      currentTab = targetTab;
    });
  });
});

⑤ カスタマイズ例

/* ローテーション速度の調整 */
.rotation-panel {
  transition: all 1s ease;
}

/* ローテーション軸の変更（X軸） */
.rotation-panel {
  transform: rotateX(180deg);
}

.rotation-panel.active {
  transform: rotateX(0deg);
}

/* ローテーション時の影効果 */
.rotation-card {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

3Dスライド効果

① デモ

See the Pen 3Dタブスライド by ケケンタ (@lgshifbg-the-looper) on CodePen.

この3Dスライド効果の特徴

立体的なスライド動き
奥行きのある表現
スムーズな遷移

② HTML

<div class="tab-container">
  <div class="tab-buttons">
    <button class="tab-btn active" data-tab="tab1">タブ1</button>
    <button class="tab-btn" data-tab="tab2">タブ2</button>
    <button class="tab-btn" data-tab="tab3">タブ3</button>
  </div>

  <div class="tab-content">
    <div class="slide3d-panel active" id="tab1">
      <div class="slide3d-card">
        <h3>タブ1のコンテンツ</h3>
        <p>3Dスライド効果のコンテンツです。</p>
      </div>
    </div>

    <div class="slide3d-panel" id="tab2">
      <div class="slide3d-card">
        <h3>タブ2のコンテンツ</h3>
        <p>3Dスライド効果のコンテンツです。</p>
      </div>
    </div>

    <div class="slide3d-panel" id="tab3">
      <div class="slide3d-card">
        <h3>タブ3のコンテンツ</h3>
        <p>3Dスライド効果のコンテンツです。</p>
      </div>
    </div>
  </div>
</div>

③ CSS

/* タブコンテナ */
.tab-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Arial', sans-serif;
}

.tab-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
  justify-content: center;
}

.tab-btn {
  padding: 12px 24px;
  border: none;
  background: #f0f0f0;
  color: #333;
  cursor: pointer;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.3s ease;
  position: relative;
}

.tab-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: #667eea;
  transition: width 0.3s ease;
}

.tab-btn.active {
  background: #667eea;
  color: white;
}

.tab-btn.active::after {
  width: 100%;
}

.tab-content {
  position: relative;
  min-height: 300px;
  perspective: 1000px;
}

.slide3d-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateZ(-200px) translateX(100%);
  transition: all 0.6s ease;
  transform-style: preserve-3d;
}

.slide3d-panel.active {
  opacity: 1;
  visibility: visible;
  transform: translateZ(0) translateX(0);
}

.slide3d-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

.slide3d-card:hover {
  transform: translateZ(20px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

h3 {
  margin: 0 0 20px 0;
  font-size: 28px;
  font-weight: 700;
}

p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const tabButtons = document.querySelectorAll('.tab-btn');
  const tabPanels = document.querySelectorAll('.slide3d-panel');
  let currentTab = 'tab1';
  
  // タブの順序を取得する関数
  function getTabIndex(tabId) {
    const tabButton = document.querySelector(`[data-tab="${tabId}"]`);
    return Array.from(tabButtons).indexOf(tabButton);
  }
  
  // スライド方向を決定する関数
  function getSlideDirection(currentIndex, targetIndex) {
    if (targetIndex > currentIndex) {
      return 'right'; // 右からスライドイン
    } else {
      return 'left'; // 左からスライドイン
    }
  }
  
  tabButtons.forEach(button => {
    button.addEventListener('click', function() {
      const targetTab = this.getAttribute('data-tab');
      
      if (targetTab === currentTab) return;
      
      // タブの順序を取得
      const currentIndex = getTabIndex(currentTab);
      const targetIndex = getTabIndex(targetTab);
      const direction = getSlideDirection(currentIndex, targetIndex);
      
      // タブボタンの状態更新
      tabButtons.forEach(btn => btn.classList.remove('active'));
      this.classList.add('active');
      
      // 3Dスライドアニメーション
      const currentPanel = document.getElementById(currentTab);
      const targetPanel = document.getElementById(targetTab);
      
      // 現在のタブをスライドアウト（方向に応じて）
      if (direction === 'right') {
        currentPanel.style.transform = 'translateZ(-200px) translateX(-100%)';
      } else {
        currentPanel.style.transform = 'translateZ(-200px) translateX(100%)';
      }
      currentPanel.style.opacity = '0';
      currentPanel.style.visibility = 'hidden';
      
      // ターゲットタブを初期位置に設定（方向に応じて）
      if (direction === 'right') {
        targetPanel.style.transform = 'translateZ(-200px) translateX(100%)';
      } else {
        targetPanel.style.transform = 'translateZ(-200px) translateX(-100%)';
      }
      targetPanel.style.opacity = '0';
      targetPanel.style.visibility = 'visible';
      targetPanel.classList.add('active');
      
      setTimeout(() => {
        currentPanel.classList.remove('active');
        
        // ターゲットタブをスライドイン
        targetPanel.style.transform = 'translateZ(0) translateX(0)';
        targetPanel.style.opacity = '1';
      }, 300);
      
      currentTab = targetTab;
    });
  });
});

⑤ カスタマイズ例

/* スライド速度の調整 */
.slide3d-panel {
  transition: all 0.8s ease;
}

/* スライド方向の変更（Y軸） */
.slide3d-panel {
  transform: translateZ(-200px) translateY(100%);
}

.slide3d-panel.active {
  transform: translateZ(0) translateY(0);
}

/* スライド時の影効果 */
.slide3d-card {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

3Dスケール効果

① デモ

See the Pen 3Dタブスケール by ケケンタ (@lgshifbg-the-looper) on CodePen.

この3Dスケール効果の特徴

立体的な拡大/縮小
奥行きのある表現
視覚的インパクト

② HTML

<div class="tab-container">
  <div class="tab-buttons">
    <button class="tab-btn active" data-tab="tab1">タブ1</button>
    <button class="tab-btn" data-tab="tab2">タブ2</button>
    <button class="tab-btn" data-tab="tab3">タブ3</button>
  </div>

  <div class="tab-content">
    <div class="scale3d-panel active" id="tab1">
      <div class="scale3d-card">
        <h3>タブ1のコンテンツ</h3>
        <p>3Dスケール効果のコンテンツです。</p>
      </div>
    </div>

    <div class="scale3d-panel" id="tab2">
      <div class="scale3d-card">
        <h3>タブ2のコンテンツ</h3>
        <p>3Dスケール効果のコンテンツです。</p>
      </div>
    </div>

    <div class="scale3d-panel" id="tab3">
      <div class="scale3d-card">
        <h3>タブ3のコンテンツ</h3>
        <p>3Dスケール効果のコンテンツです。</p>
      </div>
    </div>
  </div>
</div>

③ CSS

/* タブコンテナ */
.tab-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Arial', sans-serif;
}

.tab-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
  justify-content: center;
}

.tab-btn {
  padding: 12px 24px;
  border: none;
  background: #f0f0f0;
  color: #333;
  cursor: pointer;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.3s ease;
  position: relative;
}

.tab-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: #667eea;
  transition: width 0.3s ease;
}

.tab-btn.active {
  background: #667eea;
  color: white;
}

.tab-btn.active::after {
  width: 100%;
}

.tab-content {
  position: relative;
  min-height: 300px;
  perspective: 1000px;
}

.scale3d-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.5) translateZ(-200px);
  transition: all 0.6s ease;
  transform-style: preserve-3d;
}

.scale3d-panel.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateZ(0);
}

.scale3d-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

.scale3d-card:hover {
  transform: scale(1.05) translateZ(20px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

h3 {
  margin: 0 0 20px 0;
  font-size: 28px;
  font-weight: 700;
}

p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const tabButtons = document.querySelectorAll('.tab-btn');
  const tabPanels = document.querySelectorAll('.scale3d-panel');
  let currentTab = 'tab1';

  tabButtons.forEach(button => {
    button.addEventListener('click', function() {
      const targetTab = this.getAttribute('data-tab');

      if (targetTab === currentTab) return;

      // タブボタンの状態更新
      tabButtons.forEach(btn => btn.classList.remove('active'));
      this.classList.add('active');

      // 3Dスケールアニメーション
      const currentPanel = document.getElementById(currentTab);
      const targetPanel = document.getElementById(targetTab);

      // 現在のタブをスケールアウト
      currentPanel.style.transform = 'scale(0.5) translateZ(-200px)';
      currentPanel.style.opacity = '0';
      currentPanel.style.visibility = 'hidden';

      setTimeout(() => {
        currentPanel.classList.remove('active');

        // ターゲットタブをスケールイン
        targetPanel.classList.add('active');
        targetPanel.style.transform = 'scale(1) translateZ(0)';
        targetPanel.style.opacity = '1';
        targetPanel.style.visibility = 'visible';
      }, 300);

      currentTab = targetTab;
    });
  });
});

⑤ カスタマイズ例

/* スケール速度の調整 */
.scale3d-panel {
  transition: all 0.8s ease;
}

/* スケール強度の調整 */
.scale3d-panel {
  transform: scale(0.3) translateZ(-300px);
}

.scale3d-panel.active {
  transform: scale(1) translateZ(0);
}

/* スケール時の影効果 */
.scale3d-card {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}