與 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 動畫與過渡效果
現代網頁瀏覽器允許你僅使用 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 卡片正反面翻轉的 hover 動畫效果。
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)則可以製作卡片的背面。 - 在 hover 狀態下套用
rotateY(180deg)就能翻轉卡片。
立方體 3D 動畫
讓我們定義一個立方體的 3D 動畫。旋轉時立方體的每個面都會出現，可以藉由 hover 或自動動畫來展現 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，所以整體會以 3D 呈現。 - 每個立方體的面都用
translateZ(100px)從中心向外推，從而組成一個 3D 立方體。 rotateCube動畫會同時結合 Y 軸和 X 軸自動旋轉立方體。
使用 perspective 改變視角
減小 perspective 的值會讓視角靠近元素，更加強 3D 的景深效果。相反地，增加該值會讓視角遠離元素，3D 效果會較自然且柔和。這裡我們把 perspective 屬性由 800px 改為 200px，來顯示立方體的 3D 動畫。
1.scene {
2 perspective: 200px;
3}- 將
perspective屬性從800px改為200px，視角更接近，景深效果更明顯。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。