LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@leo_webdesigner(LEO)

HTML&CSSで作る3Dアニメーション

Posted at

はじめに

Webサイトの表現力を高める手段として、3Dアニメーションの導入が注目されています。
「3D」と聞くとJavaScriptやWebGLなどの難しい技術を連想しがちですが、HTMLとCSSだけでも、意外と手軽に3D表現を実現できます。
今回は、CSSのtransformプロパティやperspectiveを使った基本的な3Dアニメーションの作り方と、実際の活用例・応用テクニックを紹介します。

まずは要素を簡単に回転させてみよう

例：立方体の回転アニメーション

index.html
<div class="cube">
  <div class="face front">Front</div>
  <div class="face back">Back</div>
  <div class="face right">Right</div>
  <div class="face left">Left</div>
  <div class="face top">Top</div>
  <div class="face bottom">Bottom</div>
</div>
style.css
.cube {
  background-color: lightgreen;
  width: 200px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(30deg) rotateY(30deg);
  animation: spin 5s linear infinite;
  perspective: 600px;
}
@keyframes spin {
  0% { transform: rotateX(30deg) rotateY(0deg); }
  100% { transform: rotateX(30deg) rotateY(360deg); }
}

image.png

要素がぐるぐる回転します。

3Dアニメーションの使いどころ

  • CSS3Dアニメーションの主な活用場面例：
  • アイキャッチなローディングアニメーション
  • カードやパネルのフリップ（めくり）表現
  • メニューやボタンのインタラクション強化
  • ポートフォリオやLPなど、印象に残るWebページ

本格的な3Dアニメーション

CSSで本格的な3D効果を作るためには、以下のプロパティを理解することです。

  • transform: rotateX(), rotateY(), rotateZ(), translateZ()
  • perspective
  • transform-style: preserve-3d
  • transitionやanimationとの組み合わせ

この4つについて詳しく説明します。

1. transform: rotateX(), rotateY(), rotateZ(), translateZ()

これらはCSSの3D変形を行うためのプロパティで、要素を三次元空間上で回転・移動させるために使います。

1-1. rotateX(angle)

X軸（横軸）を中心に要素を回転させます。
正の値で「奥に倒れる」、負の値で「手前に倒れる」動きになります。
例：45度回転させる

style.css
.box {
  transform: rotateX(45deg);
}

この場合、要素は奥に向かって90度回転します。

1-2. rotateY(angle)

Y軸（縦軸）を中心に要素を回転させます。
正の値で「左側が奥へ」、負の値で「右側が奥へ」動きになります。
例：45度回転させる

style.css
.box {
  transform: rotateY(45deg);
}

この場合、要素は時計回りの動きになります。

1-3. rotateZ(angle)

Z軸（画面に垂直な軸）を中心に要素を回転させます。
いわゆる「平面上での回転」（2Dのrotate()と同じ）です。

例：45度回転させる

style.css
.box {
  transform: rotateZ(45deg);
}

この場合、要素が時計回りに45度回転します。

1-4. translateZ(length)

要素をZ軸方向（奥行き方向）に移動させます。

正の値で「手前に近づく」、負の値で「奥に遠ざかる」動きになります。

例：奥に20px遠ざかさせる

index.html
<div class="container">
  <div class="box">hello</div>
</div>
style.css
.container {
  perspective: 600px;  /* 遠近感の強さ。小さいほど3Dが強調される */
}
.box {
  width: 100px; height: 100px;
  background: #3af;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: transform 0.3s;
}
.box:hover {
  transform: translateZ(-20px);
}

2. perspective

rotateX()やrotateY()、translateZ()など3D変形を体感するには親要素にperspectiveプロパティを設定するのがコツです。
これを設定しないと、3D感が分かりづらくなります。

3. transform-style: preserve-3d

transform-styleは、子要素に対して3D変形（transform）を適用した時の「奥行き効果」をどう扱うかを決めるCSSプロパティです。
たとえば、「立方体」など複数の要素を3D空間で組み立てたい時に必須です。

transform-styleには主に2つの値があります。

  • flat（初期値）：
    　→ 子要素の3D効果を無視し、すべての子要素を2D平面上に並べる
  • preserve-3d：
    　→ 親要素内の子要素の3D効果を「そのまま立体的に」維持する
index.html
<div class="cube">
  <div class="face front">Front</div>
  <div class="face back">Back</div>
  <div class="face right">Right</div>
  <div class="face left">Left</div>
  <div class="face top">Top</div>
  <div class="face bottom">Bottom</div>
</div>
style.css
.cube {
  width: 100px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d; /* 重要！ */
  transform: rotateX(-20deg) rotateY(30deg); /* 回転させて立体感を見せる */
  margin: 100px auto;
  animation: spin 6s linear infinite;
}
@keyframes spin {
  to { transform: rotateX(-20deg) rotateY(390deg); }
}

.face {
  position: absolute;
  width: 100px;
  height: 100px;
  background: rgba(100, 200, 250, 0.7);
  border: 2px solid #333;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
}

/* 各面を3D空間に配置 */
.front  { transform: translateZ(50px); }
.back   { transform: rotateY(180deg) translateZ(50px); }
.right  { transform: rotateY(90deg)  translateZ(50px); }
.left   { transform: rotateY(-90deg) translateZ(50px); }
.top    { transform: rotateX(90deg)  translateZ(50px); }
.bottom { transform: rotateX(-90deg) translateZ(50px); }

image.png

4. transitionやanimationとの組み合わせ

4-1. transitionとの組み合わせ（インタラクション向き）

transitionは「状態が変わったときになめらかに変化させる」プロパティです。
たとえばマウスホバーやクリック時に「カードをひっくり返す」などの動きによく使います。
例：カードのフリップアニメーション

index.html
<div class="card">
  <div class="card__face card__face--front">Front</div>
  <div class="card__face card__face--back">Back</div>
</div>
style.css
.card {
  width: 200px; height: 120px;
  perspective: 600px;
  position: relative;
}
.card__face {
  width: 100%; height: 100%;
  position: absolute; left: 0; top: 0;
  backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 2em;
  transition: transform 0.6s cubic-bezier(0.4, 2, 0.6, 1);
}
.card__face--front {
  background: #29a; color: #fff;
}
.card__face--back {
  background: #fa3; color: #222;
  transform: rotateY(180deg);
}
.card:hover .card__face--front {
  transform: rotateY(180deg); /* ホバーで前面を裏返す */
}
.card:hover .card__face--back {
  transform: rotateY(360deg); /* 360degだとまた表になる */
}

image.png

hoverするとウラオモテが入れ替わります。

4-2. animationとの組み合わせ（自動/ループ向き）

animationは「キーフレーム通りに自動でアニメーション」させたい場合に使います。
たとえば立方体を自動回転させたり、3Dローディングアニメを作ったりするのに最適です。

例：3D立方体を自動回転

index.html
<div class="cube">
  <div class="face front">F</div>
  <div class="face back">B</div>
  <div class="face right">R</div>
  <div class="face left">L</div>
  <div class="face top">T</div>
  <div class="face bottom">D</div>
</div>
style.css
.cube {
  width: 100px; height: 100px;
  position: relative;
  transform-style: preserve-3d;
  animation: cube-spin 5s linear infinite;
  margin: 60px auto;
  perspective: 600px;
}
@keyframes cube-spin {
  0%   { transform: rotateX(0deg) rotateY(0deg); }
  100% { transform: rotateX(360deg) rotateY(360deg); }
}
.face {
  position: absolute;
  width: 100px;
  height: 100px;
  background: rgba(100, 200, 250, 0.7);
  border: 2px solid #333;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
}
/* 各面を3D空間に配置 */
.front  { transform: translateZ(50px); }
.back   { transform: rotateY(180deg) translateZ(50px); }
.right  { transform: rotateY(90deg)  translateZ(50px); }
.left   { transform: rotateY(-90deg) translateZ(50px); }
.top    { transform: rotateX(90deg)  translateZ(50px); }
.bottom { transform: rotateX(-90deg) translateZ(50px); }

image.png

3Dキューブを作成するためのポイント

  • 各.faceのtransformプロパティで3D空間上の位置と向きを決めている
  • translateZ(50px)は「要素の中心から50px手前」＝立方体の半分の厚み（サイズ/2）
  • rotateY()やrotateX()で面の向きを調整してから、translateZ()で移動させている

4-3. transitionとanimationの違い・使い分け

使う場面 transition animation
きっかけ 状態変化（hover, activeなど） 自動で動かしたいとき
アニメーション制御 開始/終了のみ 複数の動き・繰り返しもOK
簡単なインタラクション ◎ △（工夫すれば可）
複雑なシーン △ ◎

Tips

  • パフォーマンス：複雑すぎる3D表現や要素数が多いと、モバイルではカクつくことがあるため注意
  • ブラウザ対応：主要ブラウザは対応していますが、念のため検証を
  • backface-visibility：めくるアニメーション時は裏面表示制御が必須
  • perspectiveの調整：値が小さいほど3D感が強く、大きいと遠近感が薄れる
  • transformのorigin調整：回転軸を意識して使うと自由度が増す

最後に

CSSだけでも「おっ」と思わせる3Dアニメーションを作ることが可能です。
まずは簡単なものからトライして、自分なりの表現を広げてみてください。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?