Articles
Pengenalan kepada CSS
Ciri-ciri CSS Berkaitan dengan Animasi 3D

Ciri-ciri CSS Berkaitan dengan Animasi 3D

Artikel ini menerangkan ciri-ciri CSS yang berkaitan dengan animasi 3D.

Kami akan menerangkan bagaimana animasi 3D berfungsi dalam CSS dan cara menggunakannya dengan contoh kod sebenar. Anda akan secara praktikal mempelajari cara menggunakan transformasi 3D menggunakan ciri transform serta cara menambah kedalaman dan kesan tiga dimensi dengan perspective dan transform-style.

YouTube Video

HTML untuk Pratonton

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>

Animasi 3D dan Peralihan

Pelayar web moden membolehkan anda mencipta animasi 3D tiga dimensi hanya dengan menggunakan CSS. Memandangkan anda boleh mencipta interaksi yang ringan dan menarik secara visual tanpa menggunakan JavaScript, ia membantu memperbaiki UI/UX.

Bagaimana Animasi 3D Berfungsi

Animasi 3D CSS kebanyakannya menggunakan ciri-ciri berikut:.

  • Ciri transform menukar kedudukan, putaran dan skala elemen.
  • Ciri perspective menetapkan jarak sudut pandangan untuk meluahkan kedalaman 3D.
  • Ciri transform-style menentukan sama ada elemen anak perlu ditransformasikan dalam ruang 3D.
  • Ciri backface-visibility mengawal kebolehlihatan bahagian belakang sesebuah elemen.
  • Ciri-ciri animation dan transition digunakan untuk menentukan animasi.

@keyframes dan Animasi 3D

Putaran Sekeliling Paksi Y

Mari mulakan dengan mendefinisikan satu animasi 3D yang memutarkan elemen sekeliling paksi Y menggunakan @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}
  • Animasi rotateY3D memutarkan elemen sebanyak 360 darjah sekeliling paksi Y.
  • Ciri transform-style ditetapkan kepada preserve-3d untuk mengekalkan transformasi 3D elemen anak.
  • Ciri perspective menetapkan jarak sudut pandangan bagi melaras rasa kedalaman. Di sini, 800px digunakan.

Putaran Sekeliling Paksi X

Mari juga mendefinisikan animasi 3D yang memutarkan elemen sekeliling paksi 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}
  • Animasi rotateX3D memutarkan elemen sebanyak 360 darjah sekeliling paksi X.

Putaran Sekeliling Paksi X dan Paksi Y

Mari mendefinisikan animasi 3D yang menggabungkan putaran pada kedua-dua paksi X dan paksi 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}
  • Putaran pada pelbagai paksi mewujudkan kesan 3D yang lebih ketara.

Membalikkan bahagian hadapan dan belakang kad 3D

Mari mendefinisikan kesan animasi hover yang membalikkan bahagian hadapan dan belakang kad 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}
  • Dengan menetapkan ciri backface-visibility kepada hidden, bahagian belakang dihalang daripada muncul di hadapan.
  • Mengaplikasikan rotateY(180deg) pada kelas .card-back mewujudkan bahagian belakang kad.
  • Mengaplikasikan rotateY(180deg) semasa hover akan membalikkan kad.

Animasi 3D Kubus

Mari mendefinisikan animasi 3D untuk sebuah kubus. Setiap permukaan kubus akan kelihatan semasa ia berputar, menampilkan kesan 3D melalui hover atau animasi automatik.

 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}
  • Kelas .cube dipaparkan dalam bentuk 3D kerana ciri transform-style ditetapkan kepada preserve-3d.
  • Setiap permukaan kubus ditolak ke hadapan dari pusat kubus menggunakan translateZ(100px), membentuk kubus 3D.
  • Animasi rotateCube secara automatik memutarkan kubus dengan menggabungkan paksi Y dan paksi X.

Sudut pandangan berubah dengan perspective

Mengurangkan nilai perspective menjadikan sudut pandangan lebih dekat dengan elemen, menonjolkan kedalaman dan mengukuhkan kesan 3D. Sebaliknya, meningkatkan nilainya akan menjauhkan sudut pandangan, menghasilkan paparan 3D yang lebih semula jadi dan lembut. Di sini, mari kita ubah ciri perspective dari 800px kepada 200px untuk memaparkan animasi 3D kubus.

1.scene {
2  perspective: 200px;
3}
  • Dengan mengubah ciri perspective daripada 800px kepada 200px, sudut pandangan menjadi lebih dekat dan kedalaman lebih ketara.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Sifat-sifat CSS Berkaitan dengan Animasi