3Dアニメーション関連のCSSプロパティ
この記事では3Dアニメーション関連のCSSプロパティについて説明します。
CSSによる3Dアニメーションの仕組みや使い方を、実際のコード例とともに解説します。transformプロパティにおける3D変形の方法や、perspectiveやtransform-styleを活用して、要素に奥行きや立体感を加える方法まで、実践的に学ぶことができます。
YouTube Video
プレビュー用のHTML
css-animation-3d.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS 3D Animation</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-animation-3d.css">
9</head>
10<body>
11 <header>
12 <h1>CSS Properties For 3D Animation</h1>
13 </header>
14 <main>
15 <header>
16 <h2>3D Animation Related Properties</h2>
17 </header>
18
19 <!-- 3D Keyframes Section -->
20 <article>
21 <h3>@keyframes with 3D Effects</h3>
22 <section>
23 <header><h4>animation: rotateY3D 4s linear infinite</h4></header>
24 <section class="sample-view">
25 <section class="sample-view-3d">
26 <div class="box-animation-rotateY">Rotate Y</div>
27 </section>
28 </section>
29 <header><h4>animation: rotateX3D 4s linear infinite</h4></header>
30 <section class="sample-view">
31 <section class="sample-view-3d">
32 <div class="box-animation-rotateX">Rotate X</div>
33 </section>
34 </section>
35 <header><h4>animation: cube-spin 6s ease-in-out infinite</h4></header>
36 <section class="sample-view">
37 <section class="sample-view-3d">
38 <div class="box-animation-cube">Spinning Cube</div>
39 </section>
40 </section>
41 </section>
42 </article>
43
44 <article>
45 <h3>Hover to Flip the Card</h3>
46 <section>
47 <header><h4>HTML</h4></header>
48<pre>
49<div class="card-container">
50 <div class="card">
51 <div class="card-face card-front">
52 <h3>Front</h3>
53 <p>This is the front side</p>
54 </div>
55 <div class="card-face card-back">
56 <h3>Back</h3>
57 <p>This is the back side</p>
58 </div>
59 </div>
60</div>
61</pre>
62 </section>
63 <section class="sample-view" style="height: 270px;">
64 <section class="sample-view-3d-card">
65 <div class="card-container">
66 <div class="card">
67 <div class="card-face card-front">
68 <h3>Front</h3>
69 <p>This is the front side</p>
70 </div>
71 <div class="card-face card-back">
72 <h3>Back</h3>
73 <p>This is the back side</p>
74 </div>
75 </div>
76 </div>
77 </section>
78 </section>
79 </article>
80
81 <article>
82 <h3>3D Animation Cube Example</h3>
83 <section>
84 <header><h4>animation: cube-spin 6s ease-in-out infinite</h4></header>
85 <section class="sample-view" style="height: 300px;">
86 <div class="scene">
87 <div class="cube">
88 <div class="face front">Front</div>
89 <div class="face back">Back</div>
90 <div class="face left">Left</div>
91 <div class="face right">Right</div>
92 <div class="face top">Top</div>
93 <div class="face bottom">Bottom</div>
94 </div>
95 </div>
96 </section>
97 </section>
98 </article>
99 </main>
100</body>
101</html>3Dアニメーション・トランジション
近年のWebブラウザでは、CSSだけで立体的な3Dアニメーションを実現することが可能です。JavaScriptを使わずに、軽量かつ美しいインタラクションを作成できるため、UI/UXの向上に貢献します。
3Dアニメーションの仕組み
CSSの3Dアニメーションは、主に以下のプロパティを活用します。
transformプロパティによって、要素の位置や回転、スケールを変更します。perspectiveプロパティによって、3Dの奥行きを表現する視点距離を変更します。transform-styleプロパティによって、子要素に3D変形を適用するかどうかを指定します。backface-visibilityプロパティによって、裏面の表示/非表示を設定します。animationとtransitionプロパティによって、アニメーションを定義します。
@keyframesと3Dアニメーション
Y軸の回転
まずは@keyframesを用いて、要素をY軸まわりに回転させる3Dアニメーションを定義してみましょう。
1.sample-view-3d {
2 width: 100px;
3 height: 100px;
4 margin: 1rem auto;
5 perspective: 800px;
6}
7
8.box-animation-rotateY,
9.box-animation-rotateX,
10.box-animation-cube {
11 width: 100%;
12 height: 100%;
13 background: linear-gradient(45deg, #4facfe, #00f2fe);
14 display: flex;
15 align-items: center;
16 justify-content: center;
17 color: white;
18 font-size: 1.1rem;
19 border-radius: 10px;
20 transform-style: preserve-3d;
21}
22
23/* RotateY animation */
24@keyframes rotateY3D {
25 from { transform: rotateY(0deg); }
26 to { transform: rotateY(360deg); }
27}
28
29.box-animation-rotateY {
30 animation: rotateY3D 4s linear infinite;
31}rotateY3Dアニメーションは、要素がY軸を中心に360度回転します。transform-styleプロパティにはpreserve-3dを指定し、子要素の3D変形を維持しています。perspectiveプロパティには、視点の距離を設定することで、立体感を調整します。ここでは、800pxが設定されています。
X軸の回転
要素をX軸まわりに回転させる3Dアニメーションも定義してみましょう。
1/* RotateX animation */
2@keyframes rotateX3D {
3 from { transform: rotateX(0deg); }
4 to { transform: rotateX(360deg); }
5}
6
7.box-animation-rotateX {
8 animation: rotateX3D 4s linear infinite;
9}rotateX3Dアニメーションは、要素がX軸を中心に360度回転します。
X軸とY軸の回転
X軸とY軸を組み合わせて回転させる3Dアニメーションも定義してみましょう。
1/* Cube spin (combination of X and Y rotation) */
2@keyframes cube-spin {
3 0% { transform: rotateX(0deg) rotateY(0deg); }
4 50% { transform: rotateX(180deg) rotateY(180deg); }
5 100% { transform: rotateX(360deg) rotateY(360deg); }
6}
7
8.box-animation-cube {
9 animation: cube-spin 6s ease-in-out infinite;
10}- 複数軸で回転すると、特に3D感が強く出ます。
3Dカードの「表と裏」の切り替え
3Dカードの表と裏を切り替えるホバーアニメーション効果も定義してみましょう。
1/* 3D perspective wrapper */
2.sample-view-3d-card {
3 perspective: 1000px;
4 width: 300px;
5 height: 200px;
6 margin: 2rem auto;
7}
8
9/* Outer card container */
10.card-container {
11 width: 100%;
12 height: 100%;
13 position: relative;
14 perspective: 1000px;
15}
16
17/* The card itself */
18.card {
19 width: 100%;
20 height: 100%;
21 position: relative;
22 transform-style: preserve-3d;
23 transition: transform 0.8s ease;
24}
25
26/* Both faces */
27.card-face {
28 position: absolute;
29 width: 100%;
30 height: 100%;
31 backface-visibility: hidden;
32 border-radius: 12px;
33 box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
34 display: flex;
35 flex-direction: column;
36 justify-content: center;
37 align-items: center;
38 font-family: sans-serif;
39 color: white;
40 font-size: 1.1rem;
41 padding: 1rem;
42}
43
44/* Flip the card on hover */
45.card-container:hover .card {
46 transform: rotateY(180deg);
47}
48
49/* Front side style */
50.card-front {
51 background: linear-gradient(135deg, #00c9ff, #92fe9d);
52}
53
54/* Back side style */
55.card-back {
56 background: linear-gradient(135deg, #fc466b, #3f5efb);
57 transform: rotateY(180deg);
58}backface-visibilityプロパティにhiddenを指定することで、裏面が前面に表示されないようにします。.card-backクラスにrotateY(180deg)を適用することで、カードの裏面になります。- ホバー時にも、
rotateY(180deg)を適用することでカードが裏返ります。
立方体 3D アニメーション
立方体の3Dアニメーションも定義してみましょう。キューブの各面が回転しながら表示され、ホバーや自動アニメーションによって3D効果が表現されます。
1.scene {
2 width: 200px;
3 height: 200px;
4 perspective: 800px; /* Viewing distance (the smaller the value, the stronger the depth effect) */
5 background-color: rgba(255, 255, 255, 0);
6 border: 0;
7}
8
9.cube {
10 width: 100%;
11 height: 100%;
12 transform-style: preserve-3d;
13 transform: rotateX(0deg) rotateY(0deg);
14 animation: rotateCube 10s infinite linear;
15 position: relative;
16 background-color: rgba(255, 255, 255, 0);
17 border: 0;
18}
19
20.face {
21 position: absolute;
22 width: 200px;
23 height: 200px;
24 background: rgba(0, 128, 255, 0.6);
25 border: 1px solid #fff;
26 display: flex;
27 align-items: center;
28 justify-content: center;
29 font-size: 24px;
30 font-weight: bold;
31}
32
33/* Positioning each face */
34.front { transform: translateZ(100px); }
35.back { transform: rotateY(180deg) translateZ(100px); }
36.left { transform: rotateY(-90deg) translateZ(100px); }
37.right { transform: rotateY(90deg) translateZ(100px); }
38.top { transform: rotateX(90deg) translateZ(100px); }
39.bottom { transform: rotateX(-90deg) translateZ(100px); }
40
41/* Rotation animation */
42@keyframes rotateCube {
43 from {
44 transform: rotateX(0deg) rotateY(0deg);
45 }
46 to {
47 transform: rotateX(360deg) rotateY(360deg);
48 }
49}.cubeクラスはtransform-styleプロパティがpreserve-3dに設定されているため、立体的に表示されます。- 立方体の各面は、キューブの中心から
translateZ(100px)で前面へ押し出されることで3D立方体になります。 rotateCubeアニメーションにより、Y軸・X軸を組み合わせて自動回転します。
perspectiveによる視点の変化
perspectiveプロパティを小さくすると、視点が要素に近づくため、奥行きがより強調され、立体感が増します。一方、大きくすると、視点が遠ざかり、より自然で控えめな立体表現になります。ここでは、perspectiveプロパティを800pxから200pxに変更して、立方体の3Dアニメーションを表示してみましょう。
1.scene {
2 perspective: 200px;
3}- このように、
perspectiveプロパティを800pxから200pxに変更することで、より近距離からの視点に変わり、奥行きがより強調されます。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。