Articles
แนะนำ CSS
คุณสมบัติของ CSS ที่เกี่ยวข้องกับแอนิเมชัน 3D

คุณสมบัติของ CSS ที่เกี่ยวข้องกับแอนิเมชัน 3D

บทความนี้อธิบายคุณสมบัติของ CSS ที่เกี่ยวข้องกับแอนิเมชัน 3D

เราจะอธิบายวิธีการทำงานของแอนิเมชัน 3D ใน CSS และวิธีการใช้งานด้วยตัวอย่างโค้ดจริง คุณจะได้เรียนรู้การใช้งานการแปลง 3D ด้วยพร็อพเพอร์ตี้ transform และวิธีเพิ่มมิติความลึกและเอฟเฟกต์สามมิติด้วย 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&lt;div class=&quot;card-container&quot;&gt;
 50    &lt;div class=&quot;card&quot;&gt;
 51        &lt;div class=&quot;card-face card-front&quot;&gt;
 52        &lt;h3&gt;Front&lt;/h3&gt;
 53        &lt;p&gt;This is the front side&lt;/p&gt;
 54        &lt;/div&gt;
 55        &lt;div class=&quot;card-face card-back&quot;&gt;
 56        &lt;h3&gt;Back&lt;/h3&gt;
 57        &lt;p&gt;This is the back side&lt;/p&gt;
 58        &lt;/div&gt;
 59    &lt;/div&gt;
 60&lt;/div&gt;
 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 และทรานซิชัน

เบราว์เซอร์สมัยใหม่สามารถสร้างแอนิเมชัน 3D แบบสามมิติได้โดยใช้แค่ CSS เท่านั้น เนื่องจากคุณสามารถสร้างอินเทอร์แอคชั่นที่เบาและสวยงามโดยไม่ต้องใช้ JavaScript จึงช่วยให้ประสบการณ์ UI/UX ดีขึ้น

การทำงานของแอนิเมชัน 3D

แอนิเมชัน 3D ของ CSS ใช้คุณสมบัติหลักดังต่อไปนี้:

  • พร็อพเพอร์ตี้ transform ใช้สำหรับเปลี่ยนตำแหน่ง, การหมุน และการย่อขยายขององค์ประกอบ
  • พร็อพเพอร์ตี้ perspective ใช้กำหนดระยะมุมมองเพื่อแสดงความลึกสามมิติ
  • พร็อพเพอร์ตี้ transform-style ระบุว่าส่วนย่อยควรได้รับผลจากการแปลงในพื้นที่สามมิติหรือไม่
  • พร็อพเพอร์ตี้ backface-visibility ใช้ควบคุมการมองเห็นด้านหลังขององค์ประกอบ
  • พร็อพเพอร์ตี้ animation และ transition ใช้สำหรับกำหนดแอนิเมชัน

@keyframes และแอนิเมชัน 3D

การหมุนรอบแกน Y

มาเริ่มต้นด้วยการกำหนดแอนิเมชัน 3D ที่หมุนองค์ประกอบรอบแกน Y ด้วย @keyframes

 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 จะหมุนองค์ประกอบ 360 องศารอบแกน Y
  • พร็อพเพอร์ตี้ transform-style ถูกตั้งค่าเป็น preserve-3d เพื่อคงการแปลง 3D ของส่วนลูก
  • พร็อพเพอร์ตี้ perspective ใช้กำหนดระยะมุมมองเพื่อปรับความรู้สึกของความลึก ในตัวอย่างนี้ ตั้งค่าเป็น 800px

การหมุนรอบแกน X

มาสร้างแอนิเมชัน 3D ที่หมุนองค์ประกอบรอบแกน X กันด้วย

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 จะหมุนองค์ประกอบ 360 องศารอบแกน X

การหมุนรอบทั้งแกน X และแกน Y

มาสร้างแอนิเมชัน 3D ที่รวมการหมุนทั้งแกน X และ Y กัน

 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 จะป้องกันไม่ให้ด้านหลังแสดงอยู่ด้านหน้า
  • การใช้ rotateY(180deg) กับคลาส .card-back จะสร้างด้านหลังของการ์ด
  • การใช้ 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 จะแสดงผลเป็น 3D เพราะตั้งค่าพร็อพเพอร์ตี้ transform-style เป็น preserve-3d
  • แต่ละหน้าของลูกบาศก์ถูกดันออกจากจุดศูนย์กลางด้วย translateZ(100px) จึงสร้างเป็นลูกบาศก์ 3D
  • แอนิเมชัน rotateCube จะหมุนลูกบาศก์โดยอัตโนมัติด้วยการรวมการหมุนบนแกน Y และ X

การเปลี่ยนแปลงมุมมองด้วย perspective

การลดค่าของ perspective จะทำให้มุมมองใกล้กับองค์ประกอบมากขึ้น เพิ่มความลึกและเน้นเอฟเฟกต์ 3D ในทางกลับกัน การเพิ่มค่าจะทำให้มุมมองห่างออกไป ส่งผลให้องค์ประกอบสามมิติดูสมจริงและนุ่มนวลขึ้น ในที่นี้ เราจะเปลี่ยนค่าพร็อพเพอร์ตี้ perspective จาก 800px เป็น 200px เพื่อแสดงแอนิเมชัน 3D ของลูกบาศก์

1.scene {
2  perspective: 200px;
3}
  • เมื่อเปลี่ยนค่าพร็อพเพอร์ตี้ perspective จาก 800px เป็น 200px มุมมองจะใกล้ขึ้นและเน้นความลึกมากยิ่งขึ้น

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video

คุณสมบัติ CSS ที่เกี่ยวข้องกับการเคลื่อนไหว