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

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

2025-08-29

ケケンタ

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

ケケンタ

立体的で魅力的なアイコン効果を作りたい……

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

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

をご紹介します。

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

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

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

ケケンタ

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

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

あわせて読みたい

【Web制作】ボタンホバーアニメーション完全版｜8カテゴリ・53種類を網羅

【Web制作】ナビゲーションタブアニメーション完全版｜5カテゴリ・26種類を網羅

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

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

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

created by Rinker

動くWebデザインアイディア帳　実践編

created by Rinker

ケケンタ

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

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

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

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

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

ケケンタ

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

タイマースタート

3:00

1分 3分 5分 10分

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

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

created by Rinker

3Dアイコンアニメーションとは

3Dアイコンアニメーションは、立体的な効果を使用してアイコンに奥行きと動きを与えるアニメーション効果です。ユーザーに視覚的なインパクトを与え、モダンで洗練された印象を提供する効果的な手法です。

効果的な使用場面

適している場面

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

避けるべき場面

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

実装方法の比較

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

FontAwesomeの読み込み

FontAwesomeアイコンを使用するために、HTMLのheadセクションに以下のコードを追加してください。
※バージョンはご自身の環境にあわせてご選択ください。基本は最新で大丈夫かと思います。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

3Dフリップ効果

3D空間でアイコンがフリップするアニメーションです。

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

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

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

② HTML

<div class="icon-container">
  <div class="flip3d-icons">
    <div class="flip3d-icon" data-state="front">
      <div class="flip3d-front"><i class="fas fa-bullseye"></i></div>
      <div class="flip3d-back"><i class="fas fa-tent"></i></div>
    </div>
    <div class="flip3d-icon" data-state="front">
      <div class="flip3d-front"><i class="fas fa-masks-theater"></i></div>
      <div class="flip3d-back"><i class="fas fa-palette"></i></div>
    </div>
    <div class="flip3d-icon" data-state="front">
      <div class="flip3d-front"><i class="fas fa-crystal-ball"></i></div>
      <div class="flip3d-back"><i class="fas fa-gem"></i></div>
    </div>
  </div>
</div>

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
  perspective: 1000px;
}

/* 固有のスタイル */
.flip3d-icons {
  display: flex;
  gap: 30px;
}

.flip3d-icon {
  position: relative;
  width: 80px;
  height: 80px;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.8s ease;
}

.flip3d-front,
.flip3d-back {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  backface-visibility: hidden;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
}

.flip3d-back {
  transform: rotateY(180deg);
  background: rgba(255, 215, 0, 0.2);
}

.flip3d-icon[data-state="flipped"] {
  transform: rotateY(180deg);
}

/* アニメーション効果 */
@keyframes flip3d {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}

/* 逆方向のアニメーション */
@keyframes flip3dReverse {
  0% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

.flip3d-icon.flipping {
  animation: flip3d 0.8s ease;
}

.flip3d-icon.flipping.reverse {
  animation: flip3dReverse 0.8s ease;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.flip3d-icon');

  // 3Dフリップアニメーションクラス
  class Flip3DIconAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon) => {
        icon.addEventListener('click', () => {
          this.toggleFlip(icon);
        });
      });
    }

    toggleFlip(icon) {
      const currentState = icon.getAttribute('data-state');
      const newState = currentState === 'front' ? 'flipped' : 'front';

      // アニメーション開始
      icon.classList.add('flipping');

      // 逆方向のアニメーションの場合はreverseクラスを追加
      if (currentState === 'flipped') {
        icon.classList.add('reverse');
      }

      icon.setAttribute('data-state', newState);

      // アニメーション完了後にクラスを削除
      setTimeout(() => {
        icon.classList.remove('flipping', 'reverse');
      }, 800);
    }
  }

  // アニメーション初期化
  new Flip3DIconAnimation(icons);
});

⑤ カスタマイズ例

/* フリップ軸の変更（X軸） */
.flip3d-icon[data-state="flipped"] {
  transform: rotateX(180deg);
}

/* フリップ速度の調整 */
.flip3d-icon {
  transition: transform 1s ease;
}

/* フリップ時の影効果 */
.flip3d-icon.flipping {
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
}

3Dティルト効果

3D空間でアイコンが傾斜するアニメーションです。

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

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

立体的な傾斜動き
マウス追従効果
インタラクティブな印象

② HTML

<div class="icon-container">
  <div class="tilt3d-icons">
    <div class="tilt3d-icon" data-icon="🎯"><i class="fas fa-bullseye"></i></div>
    <div class="tilt3d-icon" data-icon="🎪"><i class="fas fa-tent"></i></div>
    <div class="tilt3d-icon" data-icon="🎭"><i class="fas fa-masks-theater"></i></div>
    <div class="tilt3d-icon" data-icon="🎨"><i class="fas fa-palette"></i></div>
  </div>
</div>

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
  perspective: 1000px;
}

/* 固有のスタイル */
.tilt3d-icons {
  display: flex;
  gap: 30px;
}

.tilt3d-icon {
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
  transform-style: preserve-3d;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
}

.tilt3d-icon:hover {
  transform: perspective(1000px) rotateX(20deg) rotateY(20deg);
  background: rgba(255, 215, 0, 0.2);
  text-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

/* アニメーション効果 */
@keyframes tilt3d {
  0%, 100% {
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(1000px) rotateX(15deg) rotateY(15deg);
  }
}

.tilt3d-icon.animate {
  animation: tilt3d 2s ease-in-out infinite;
}

/* マウス移動時のティルト効果を優先 */
.tilt3d-icon[style*="transform"] {
  animation: none !important;
}

/* 自動アニメーションが確実に動作するように */
.tilt3d-icon.animate {
  animation: tilt3d 2s ease-in-out infinite !important;
}

/* 3Dローテーション効果のホバー処理を確実に動作させる */
.rotate3d-icon[style*="transform"] {
  animation: none !important;
}

.rotate3d-icon.animate {
  animation: rotate3d 3s linear infinite !important;
}

/* 3Dスライド効果のホバー処理を確実に動作させる */
.slide3d-icon[style*="transform"] {
  animation: none !important;
}

.slide3d-icon.animate {
  animation: slide3d 2s ease-in-out infinite !important;
}

/* 3Dスケール効果のホバー処理を確実に動作させる */
.scale3d-icon[style*="transform"] {
  animation: none !important;
}

.scale3d-icon.animate {
  animation: scale3d 2s ease-in-out infinite !important;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.tilt3d-icon');

  // 3Dティルトアニメーションクラス
  class Tilt3DIconAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon, index) => {
        // マウス移動でのティルト効果
        icon.addEventListener('mousemove', (e) => {
          // 自動アニメーションを一時停止
          icon.classList.remove('animate');
          this.tilt3D(icon, e);
        });

        icon.addEventListener('mouseleave', () => {
          this.resetTilt(icon);
          // 自動アニメーションを確実に再開
          setTimeout(() => {
            icon.classList.add('animate');
          }, 50);
        });

        // 自動アニメーション
        setTimeout(() => {
          icon.classList.add('animate');
        }, index * 200);
      });
    }

    tilt3D(icon, e) {
      const rect = icon.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) / 2;
      const rotateY = (centerX - x) / 2;

      // インラインスタイルで適用
      icon.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
      icon.style.background = 'rgba(255, 215, 0, 0.2)';
      icon.style.transition = 'none'; // アニメーション中のtransitionを無効化
    }

    resetTilt(icon) {
      // インラインスタイルを完全にクリア
      icon.style.removeProperty('transform');
      icon.style.removeProperty('background');
      icon.style.removeProperty('transition');

      // デフォルト状態に戻す
      icon.style.background = 'rgba(255, 255, 255, 0.1)';
      icon.style.transition = 'all 0.3s ease';
    }
  }

  // アニメーション初期化
  new Tilt3DIconAnimation(icons);
});

⑤ カスタマイズ例

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

/* ティルト速度の調整 */
.tilt3d-icon {
  transition: all 0.5s ease;
}

/* ティルト時の影効果 */
.tilt3d-icon:hover {
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5));
}

3Dローテーション効果

3D空間でアイコンが回転するアニメーションです。

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

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

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

② HTML

<div class="icon-container">
  <div class="rotate3d-icons">
    <div class="rotate3d-icon" data-icon="⚙"><i class="fas fa-cog"></i></div>
    <div class="rotate3d-icon" data-icon="🔄"><i class="fas fa-sync-alt"></i></div>
    <div class="rotate3d-icon" data-icon="🎯"><i class="fas fa-bullseye"></i></div>
    <div class="rotate3d-icon" data-icon="⭐"><i class="fas fa-star"></i></div>
  </div>
</div>

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
  perspective: 1000px;
}

/* 固有のスタイル */
.rotate3d-icons {
  display: flex;
  gap: 30px;
}

.rotate3d-icon {
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.6s ease;
  transform-style: preserve-3d;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
}

.rotate3d-icon:hover {
  transform: perspective(1000px) rotateY(360deg) !important;
  background: rgba(255, 107, 107, 0.2) !important;
  text-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

/* アニメーション効果 */
@keyframes rotate3d {
  0% {
    transform: perspective(1000px) rotateY(0deg);
  }
  100% {
    transform: perspective(1000px) rotateY(360deg);
  }
}

.rotate3d-icon.animate {
  animation: rotate3d 3s linear infinite;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.rotate3d-icon');

  // 3Dローテーションアニメーションクラス
  class Rotate3DIconAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon, index) => {
        // ホバー効果
        icon.addEventListener('mouseenter', () => {
          this.rotate3D(icon);
        });

        icon.addEventListener('mouseleave', () => {
          this.resetRotate(icon);
          // 自動アニメーションを再開
          setTimeout(() => {
            icon.classList.add('animate');
          }, 50);
        });

        // 自動アニメーション
        setTimeout(() => {
          icon.classList.add('animate');
        }, index * 300);
      });
    }

    rotate3D(icon) {
      // 自動アニメーションを一時停止
      icon.classList.remove('animate');

      // インラインスタイルで確実に適用
      icon.style.transform = 'perspective(1000px) rotateY(360deg)';
      icon.style.background = 'rgba(255, 107, 107, 0.2)';
      icon.style.transition = 'none'; // アニメーション中のtransitionを無効化
    }

    resetRotate(icon) {
      // インラインスタイルをクリア
      icon.style.removeProperty('transform');
      icon.style.removeProperty('background');
      icon.style.removeProperty('transition');

      // デフォルト状態に戻す
      icon.style.background = 'rgba(255, 255, 255, 0.1)';
      icon.style.transition = 'all 0.6s ease';
    }
  }

  // アニメーション初期化
  new Rotate3DIconAnimation(icons);
});

⑤ カスタマイズ例

/* 回転軸の変更（X軸） */
.rotate3d-icon:hover {
  transform: perspective(1000px) rotateX(360deg);
}

/* 回転速度の調整 */
.rotate3d-icon {
  transition: all 1s ease;
}

/* 回転時の影効果 */
.rotate3d-icon:hover {
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
}

3Dスライド効果

3D空間でアイコンがスライドするアニメーションです。

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

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

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

② HTML

<div class="icon-container">
  <div class="slide3d-icons">
    <div class="slide3d-icon" data-icon="🔮"><i class="fas fa-magic"></i></div>
    <div class="slide3d-icon" data-icon="💎"><i class="fas fa-gem"></i></div>
    <div class="slide3d-icon" data-icon="🌟"><i class="fas fa-star"></i></div>
    <div class="slide3d-icon" data-icon="✨"><i class="fas fa-wand-magic-sparkles"></i></div>
  </div>
</div>

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
  perspective: 1000px;
}

/* 固有のスタイル */
.slide3d-icons {
  display: flex;
  gap: 30px;
}

.slide3d-icon {
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.5s ease;
  transform-style: preserve-3d;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
}

.slide3d-icon:hover {
  transform: perspective(1000px) translateZ(50px) translateY(-20px) !important;
  background: rgba(0, 210, 255, 0.2) !important;
  text-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

/* アニメーション効果 */
@keyframes slide3d {
  0%, 100% {
    transform: perspective(1000px) translateZ(0) translateY(0);
  }
  50% {
    transform: perspective(1000px) translateZ(30px) translateY(-10px);
  }
}

.slide3d-icon.animate {
  animation: slide3d 2s ease-in-out infinite;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.slide3d-icon');

  // 3Dスライドアニメーションクラス
  class Slide3DIconAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon, index) => {
        // ホバー効果
        icon.addEventListener('mouseenter', () => {
          // 自動アニメーションを一時停止
          icon.classList.remove('animate');
          this.slide3D(icon);
        });

        icon.addEventListener('mouseleave', () => {
          this.resetSlide(icon);
          // 自動アニメーションを再開
          setTimeout(() => {
            icon.classList.add('animate');
          }, 50);
        });

        // 自動アニメーション
        setTimeout(() => {
          icon.classList.add('animate');
        }, index * 250);
      });
    }

    slide3D(icon) {
      // インラインスタイルで確実に適用
      icon.style.transform = 'perspective(1000px) translateZ(50px) translateY(-20px)';
      icon.style.background = 'rgba(0, 210, 255, 0.2)';
      icon.style.transition = 'none'; // アニメーション中のtransitionを無効化
    }

    resetSlide(icon) {
      // インラインスタイルを完全にクリア
      icon.style.removeProperty('transform');
      icon.style.removeProperty('background');
      icon.style.removeProperty('transition');

      // デフォルト状態に戻す
      icon.style.background = 'rgba(255, 255, 255, 0.1)';
      icon.style.transition = 'all 0.5s ease';
    }
  }

  // アニメーション初期化
  new Slide3DIconAnimation(icons);
});

⑤ カスタマイズ例

/* スライド強度の調整 */
.slide3d-icon:hover {
  transform: perspective(1000px) translateZ(80px) translateY(-30px);
}

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

/* スライド時の影効果 */
.slide3d-icon:hover {
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5));
}

3Dスケール効果

3D空間でアイコンが拡大・縮小するアニメーションです。

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

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

立体的な拡大・縮小
奥行きのある表現
焦点を集める効果

② HTML

<div class="icon-container">
  <div class="scale3d-icons">
    <div class="scale3d-icon" data-icon="🔍"><i class="fas fa-search"></i></div>
    <div class="scale3d-icon" data-icon="📱"><i class="fas fa-mobile-alt"></i></div>
    <div class="scale3d-icon" data-icon="💻"><i class="fas fa-laptop"></i></div>
    <div class="scale3d-icon" data-icon="⌚"><i class="fas fa-clock"></i></div>
  </div>
</div>

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
  perspective: 1000px;
}

/* 固有のスタイル */
.scale3d-icons {
  display: flex;
  gap: 30px;
}

.scale3d-icon {
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.4s ease;
  transform-style: preserve-3d;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
}

.scale3d-icon:hover {
  transform: perspective(1000px) scale3d(1.3, 1.3, 1.3) translateZ(30px) !important;
  background: rgba(254, 202, 87, 0.2) !important;
  text-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

/* アニメーション効果 */
@keyframes scale3d {
  0%, 100% {
    transform: perspective(1000px) scale3d(1, 1, 1) translateZ(0);
  }
  50% {
    transform: perspective(1000px) scale3d(1.2, 1.2, 1.2) translateZ(20px);
  }
}

.scale3d-icon.animate {
  animation: scale3d 2s ease-in-out infinite;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.scale3d-icon');

  // 3Dスケールアニメーションクラス
  class Scale3DIconAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon, index) => {
        // ホバー効果
        icon.addEventListener('mouseenter', () => {
          // 自動アニメーションを一時停止
          icon.classList.remove('animate');
          this.scale3D(icon);
        });

        icon.addEventListener('mouseleave', () => {
          this.resetScale(icon);
          // 自動アニメーションを再開
          setTimeout(() => {
            icon.classList.add('animate');
          }, 50);
        });

        // 自動アニメーション
        setTimeout(() => {
          icon.classList.add('animate');
        }, index * 200);
      });
    }

    scale3D(icon) {
      // インラインスタイルで適用
      icon.style.transform = 'perspective(1000px) scale3d(1.3, 1.3, 1.3) translateZ(30px)';
      icon.style.background = 'rgba(254, 202, 87, 0.2)';
      icon.style.transition = 'none'; // アニメーション中のtransitionを無効化
    }

    resetScale(icon) {
      // インラインスタイルを完全にクリア
      icon.style.removeProperty('transform');
      icon.style.removeProperty('background');
      icon.style.removeProperty('transition');

      // デフォルト状態に戻す
      icon.style.background = 'rgba(255, 255, 255, 0.1)';
      icon.style.transition = 'all 0.4s ease';
    }
  }

  // アニメーション初期化
  new Scale3DIconAnimation(icons);
});

⑤ カスタマイズ例

/* スケール強度の調整 */
.scale3d-icon:hover {
  transform: perspective(1000px) scale3d(1.5, 1.5, 1.5) translateZ(50px);
}

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

/* スケール時の影効果 */
.scale3d-icon:hover {
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5));
}