Articles
Pengenalan ke CSS
Properti CSS yang Terkait dengan Animasi 3D

Properti CSS yang Terkait dengan Animasi 3D

Artikel ini menjelaskan properti CSS yang berkaitan dengan animasi 3D.

Kami akan menjelaskan cara kerja animasi 3D di CSS dan cara menggunakannya dengan contoh kode nyata. Anda akan belajar secara praktis bagaimana menerapkan transformasi 3D menggunakan properti transform dan bagaimana menambahkan kedalaman serta efek tiga dimensi dengan perspective dan transform-style.

YouTube Video

HTML untuk Pratinjau

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 dan Transisi 3D

Browser web modern memungkinkan Anda membuat animasi 3D tiga dimensi hanya dengan CSS. Karena Anda dapat membuat interaksi yang ringan dan menarik secara visual tanpa menggunakan JavaScript, hal tersebut berkontribusi pada peningkatan UI/UX.

Cara Kerja Animasi 3D

Animasi 3D CSS terutama memanfaatkan properti berikut:.

  • Properti transform mengubah posisi, rotasi, dan skala elemen.
  • Properti perspective mengatur jarak sudut pandang untuk menampilkan kedalaman 3D.
  • Properti transform-style menentukan apakah elemen anak harus ditransformasikan dalam ruang 3D.
  • Properti backface-visibility mengontrol visibilitas sisi belakang elemen.
  • Properti animation dan transition digunakan untuk mendefinisikan animasi.

@keyframes dan Animasi 3D

Rotasi di Sekitar Sumbu Y

Mari mulai dengan mendefinisikan animasi 3D yang memutar sebuah elemen di sekitar sumbu 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 memutar elemen sebesar 360 derajat di sekitar sumbu Y.
  • Properti transform-style diatur ke preserve-3d untuk mempertahankan transformasi 3D pada elemen anak.
  • Properti perspective mengatur jarak sudut pandang untuk menyesuaikan kesan kedalaman. Di sini, diatur ke 800px.

Rotasi di Sekitar Sumbu X

Mari juga mendefinisikan animasi 3D yang memutar elemen di sekitar sumbu 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 memutar elemen sebesar 360 derajat di sekitar sumbu X.

Rotasi di Sekitar Sumbu X dan Y sekaligus

Mari kita definisikan animasi 3D yang menggabungkan rotasi pada sumbu X dan Y secara bersamaan.

 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}
  • Rotasi pada beberapa sumbu menghasilkan efek 3D yang lebih kuat.

Membalik sisi depan dan belakang kartu 3D

Mari definisikan efek animasi hover yang membalik sisi depan dan belakang kartu 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 mengatur properti backface-visibility ke hidden, bagian belakang dicegah agar tidak muncul di bagian depan.
  • Menerapkan rotateY(180deg) pada class .card-back membuat sisi belakang kartu.
  • Menerapkan rotateY(180deg) saat hover akan membalik kartu tersebut.

Animasi Kubus 3D

Mari kita definisikan animasi 3D untuk sebuah kubus. Setiap sisi kubus muncul saat berputar, menampilkan efek 3D melalui hover atau animasi otomatis.

 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}
  • Class .cube ditampilkan dalam bentuk 3D karena propertinya transform-style diatur ke preserve-3d.
  • Setiap sisi kubus didorong ke depan dari tengah kubus menggunakan translateZ(100px), membentuk kubus 3D.
  • Animasi rotateCube secara otomatis memutar kubus dengan menggabungkan rotasi di sumbu Y dan X.

Sudut pandang berubah dengan perspective

Mengurangi nilai perspective membuat sudut pandang lebih dekat ke elemen, menonjolkan kedalaman dan meningkatkan efek 3D. Sebaliknya, meningkatkan nilainya membuat sudut pandang lebih jauh sehingga menghasilkan tampilan 3D yang lebih alami dan halus. Di sini, mari kita ubah properti perspective dari 800px menjadi 200px untuk menampilkan animasi 3D pada kubus.

1.scene {
2  perspective: 200px;
3}
  • Dengan mengubah properti perspective dari 800px menjadi 200px, sudut pandang menjadi lebih dekat dan kedalaman lebih terlihat.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Properti CSS yang Terkait Animasi