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

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

2025-08-24

ケケンタ

3Dテキストアニメーションを実装したい……

ケケンタ

立体的で魅力的なテキスト効果を作りたい……

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

Web制作において必須のUI要素
3Dテキストアニメーション

をご紹介します。

5種類のアニメーション効果を完全網羅した実装なので、いままさに「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

ケケンタ

ケケンタの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フリップ効果	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐	⭐⭐⭐⭐

3D浮上効果

3D空間でテキストが浮上するアニメーションです。

① デモ

See the Pen 3Dテキスト浮上 by ケケンタ (@lgshifbg-the-looper) on CodePen.

この3D浮上効果の特徴

立体的な浮上動き
奥行きのある表現
スムーズな動き

② HTML

<div class="text-container">
  <div class="float3d-text">
    <span class="float3d-char" data-char="H">H</span>
    <span class="float3d-char" data-char="E">E</span>
    <span class="float3d-char" data-char="L">L</span>
    <span class="float3d-char" data-char="L">L</span>
    <span class="float3d-char" data-char="O">O</span>
  </div>
</div>

③ CSS

/* 共通スタイル */
.text-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;
}

/* 固有のスタイル */
.float3d-text {
  display: flex;
  gap: 8px;
  transform-style: preserve-3d;
}

.float3d-char {
  font-size: 48px;
  font-weight: bold;
  color: white;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: translateZ(0);
  transition: all 0.6s ease;
  cursor: pointer;
  position: relative;
}

.float3d-char:hover {
  transform: translateZ(50px) translateY(-20px);
  text-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
  color: #ffd700;
}

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

.float3d-char.animate {
  animation: float3d 2s ease-in-out infinite;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const chars = document.querySelectorAll('.float3d-char');

  // 3D浮上アニメーションクラス
  class Float3DAnimation {
    constructor(chars) {
      this.chars = chars;
      this.init();
    }

    init() {
      this.chars.forEach((char, index) => {
        // ホバー効果
        char.addEventListener('mouseenter', () => {
          this.floatUp(char);
        });

        char.addEventListener('mouseleave', () => {
          this.floatDown(char);
        });

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

    floatUp(char) {
      char.style.transform = 'translateZ(50px) translateY(-20px)';
      char.style.color = '#ffd700';
    }

    floatDown(char) {
      char.style.transform = 'translateZ(0) translateY(0)';
      char.style.color = 'white';
    }
  }

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

⑤ カスタマイズ例

/* 浮上強度の調整 */
.float3d-char:hover {
  transform: translateZ(80px) translateY(-30px);
}

/* 浮上速度の調整 */
.float3d-char {
  transition: all 0.8s ease;
}

/* 浮上時の影効果 */
.float3d-char:hover {
  text-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
}

3D回転効果

3D空間でテキストが回転するアニメーションです。

① デモ

See the Pen 3Dテキスト回転 by ケケンタ (@lgshifbg-the-looper) on CodePen.

この3D回転効果の特徴

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

② HTML

<div class="text-container">
  <div class="rotate3d-text">
    <span class="rotate3d-char" data-char="W">W</span>
    <span class="rotate3d-char" data-char="O">O</span>
    <span class="rotate3d-char" data-char="R">R</span>
    <span class="rotate3d-char" data-char="L">L</span>
    <span class="rotate3d-char" data-char="D">D</span>
  </div>
</div>

③ CSS

/* 共通スタイル */
.text-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-text {
  display: flex;
  gap: 8px;
  transform-style: preserve-3d;
}

.rotate3d-char {
  font-size: 48px;
  font-weight: bold;
  color: white;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: rotateY(0deg);
  transition: all 0.8s ease;
  cursor: pointer;
  transform-style: preserve-3d;
}

.rotate3d-char:hover {
  transform: rotateY(360deg);
  color: #ff6b6b;
}

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

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

④ JavaScript

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

  // 3D回転アニメーションクラス
  class Rotate3DAnimation {
    constructor(chars) {
      this.chars = chars;
      this.init();
    }

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

        char.addEventListener('mouseleave', () => {
          this.resetRotation(char);
        });

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

    rotate3D(char) {
      char.style.transform = 'rotateY(360deg)';
      char.style.color = '#ff6b6b';
    }

    resetRotation(char) {
      char.style.transform = 'rotateY(0deg)';
      char.style.color = 'white';
    }
  }

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

⑤ カスタマイズ例

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

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

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

3Dスケール効果

3D空間でテキストが拡大/縮小するアニメーションです。

① デモ

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

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

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

② HTML

<div class="text-container">
  <div class="scale3d-text">
    <span class="scale3d-char" data-char="S">S</span>
    <span class="scale3d-char" data-char="C">C</span>
    <span class="scale3d-char" data-char="A">A</span>
    <span class="scale3d-char" data-char="L">L</span>
    <span class="scale3d-char" data-char="E">E</span>
  </div>
</div>

③ CSS

/* 共通スタイル */
.text-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-text {
  display: flex;
  gap: 8px;
  transform-style: preserve-3d;
}

.scale3d-char {
  font-size: 48px;
  font-weight: bold;
  color: white;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: scale(1) translateZ(0);
  transition: all 0.6s ease;
  cursor: pointer;
  transform-style: preserve-3d;
}

.scale3d-char:hover {
  transform: scale(1.5) translateZ(30px);
  color: #4ecdc4;
}

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

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

④ JavaScript

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

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

    init() {
      this.chars.forEach((char, index) => {
        // ホバー効果
        char.addEventListener('mouseenter', () => {
          this.scaleUp(char);
        });

        char.addEventListener('mouseleave', () => {
          this.scaleDown(char);
        });

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

    scaleUp(char) {
      char.style.transform = 'scale(1.5) translateZ(30px)';
      char.style.color = '#4ecdc4';
    }

    scaleDown(char) {
      char.style.transform = 'scale(1) translateZ(0)';
      char.style.color = 'white';
    }
  }

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

⑤ カスタマイズ例

/* スケール強度の調整 */
.scale3d-char:hover {
  transform: scale(2) translateZ(50px);
}

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

/* スケール時の影効果 */
.scale3d-char:hover {
  text-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="text-container">
  <div class="tilt3d-text">
    <span class="tilt3d-char" data-char="T">T</span>
    <span class="tilt3d-char" data-char="I">I</span>
    <span class="tilt3d-char" data-char="L">L</span>
    <span class="tilt3d-char" data-char="T">T</span>
  </div>
</div>

③ CSS

/* 共通スタイル */
.text-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-text {
  display: flex;
  gap: 8px;
  transform-style: preserve-3d;
}

.tilt3d-char {
  font-size: 48px;
  font-weight: bold;
  color: white;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
  transition: all 0.3s ease;
  cursor: pointer;
  transform-style: preserve-3d;
}

.tilt3d-char:hover {
  transform: perspective(1000px) rotateX(15deg) rotateY(15deg);
  color: '#ff9ff3';
}

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

.tilt3d-char.animate {
  animation: tilt3d 3s ease-in-out infinite;
}

④ JavaScript

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

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

    init() {
      this.chars.forEach((char, index) => {
        // マウス移動効果
        char.addEventListener('mousemove', (e) => {
          this.tilt3D(char, e);
        });

        char.addEventListener('mouseleave', () => {
          this.resetTilt(char);
        });

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

    tilt3D(char, e) {
      const rect = char.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) / 5; // より大きな動きのため除数を5に変更
      const rotateY = (centerX - x) / 5; // より大きな動きのため除数を5に変更

      char.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
      char.style.color = '#ff9ff3';
    }

    resetTilt(char) {
      char.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg)';
      char.style.color = 'white';
    }
  }

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

⑤ カスタマイズ例

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

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

/* ティルト時の影効果 */
.tilt3d-char:hover {
  text-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

3Dフリップ効果

3D空間でテキストがフリップするアニメーションです。

① デモ

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

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

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

② HTML

<div class="text-container">
  <div class="flip3d-text">
    <span class="flip3d-char" data-char="F">F</span>
    <span class="flip3d-char" data-char="L">L</span>
    <span class="flip3d-char" data-char="I">I</span>
    <span class="flip3d-char" data-char="P">P</span>
  </div>
</div>

③ CSS

/* 共通スタイル */
.text-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-text {
  display: flex;
  gap: 8px;
  transform-style: preserve-3d;
}

.flip3d-char {
  font-size: 48px;
  font-weight: bold;
  color: white;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: rotateY(0deg);
  transition: all 0.8s ease;
  cursor: pointer;
  transform-style: preserve-3d;
  position: relative;
}

.flip3d-char:hover {
  transform: rotateY(180deg);
  color: #feca57;
}

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

.flip3d-char.animate {
  animation: flip3d 2s ease-in-out infinite;
}

④ JavaScript

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

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

    init() {
      this.chars.forEach((char, index) => {
        // ホバー効果
        char.addEventListener('mouseenter', () => {
          this.flip3D(char);
        });

        char.addEventListener('mouseleave', () => {
          this.resetFlip(char);
        });

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

    flip3D(char) {
      char.style.transform = 'rotateY(180deg)';
      char.style.color = '#feca57';
    }

    resetFlip(char) {
      char.style.transform = 'rotateY(0deg)';
      char.style.color = 'white';
    }
  }

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

⑤ カスタマイズ例

/* フリップ軸の変更（X軸） */
.flip3d-char:hover {
  transform: rotateX(180deg);
}

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

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