Articles
Panimula sa CSS
Mga Katangian ng CSS na Kaugnay sa 3D Animation

Mga Katangian ng CSS na Kaugnay sa 3D Animation

Ipapaliwanag ng artikulong ito ang mga katangian ng CSS na nauugnay sa 3D animations.

Ipapaliwanag namin kung paano gumagana ang 3D animation sa CSS at kung paano ito gamitin gamit ang mga totoong halimbawa ng code. Matututuhan mo kung paano praktikal na maglagay ng 3D transformations gamit ang transform na katangian at kung paano magdagdag ng lalim at three-dimensional na epekto gamit ang perspective at transform-style.

YouTube Video

HTML para sa Preview

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 Animation at mga Paglipat (Transitions)

Pinapayagan ka ng mga modernong web browser na gumawa ng three-dimensional na 3D animation gamit lamang ang CSS. Dahil maaari kang gumawa ng magagaan at kaakit-akit na mga interaksyon nang hindi gumagamit ng JavaScript, nakakatulong ito sa pagpapaganda ng UI/UX.

Paano Gumagana ang 3D Animation

Pangunahing ginagamit ng CSS 3D animations ang mga sumusunod na katangian:.

  • Binabago ng katangiang transform ang posisyon, ikot (rotation), at laki (scale) ng mga elemento.
  • Itinatakda ng katangiang perspective ang distansya ng viewpoint upang maipakita ang lalim ng 3D.
  • Itinatakda ng katangiang transform-style kung ang mga anak na elemento ay dapat baguhin sa 3D na espasyo.
  • Kinokontrol ng katangiang backface-visibility ang pagiging kita o tago ng likod ng elemento.
  • Ginagamit ang mga katangiang animation at transition upang tukuyin ang mga animation.

@keyframes at 3D Animations

Pag-ikot sa Y-Axis

Magsimula tayo sa pagtukoy ng 3D animation na umiikot lamang ang isang elemento sa Y-axis gamit ang @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}
  • Iniiikot ng animation na rotateY3D ang elemento ng 360 degrees sa paligid ng Y-axis.
  • Itinakda ang katangiang transform-style sa preserve-3d upang mapanatili ang 3D transformations ng mga anak na elemento.
  • Itinatakda ng katangiang perspective ang distansya ng viewpoint upang i-adjust ang pakiramdam ng lalim. Dito, ang 800px ang ginamit.

Pag-ikot sa X-Axis

Magdeklara din tayo ng 3D animation na umiikot ang elemento sa X-axis.

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}
  • Iniiikot ng animation na rotateX3D ang elemento ng 360 degrees sa paligid ng X-axis.

Pag-ikot sa Parehong X-Axis at Y-Axis

Magdeklara tayo ng 3D animation na nagsasama ng ikot sa parehong X at Y axes.

 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}
  • Ang pag-ikot sa maraming axis ay lumilikha ng mas matinding 3D na epekto.

Pagbabaligtad ng harap at likod ng 3D card

Magdeklara tayo ng hover animation effect na bumabaligtad sa harap at likod ng 3D card.

 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}
  • Sa pamamagitan ng pagtatalaga ng backface-visibility na katangian sa hidden, napipigilan ang likod na lumabas sa harap.
  • Sa paglalagay ng rotateY(180deg) sa klaseng .card-back, nililikha ang likod ng card.
  • Sa pag-hover, ang pag-apply ng rotateY(180deg) ay bumabaligtad sa card.

Cube 3D Animation

Magdeklara tayo ng 3D animation para sa isang cube. Bawa't mukha ng cube ay lilitaw habang umiikot, ipinapakita ang 3D effect sa pamamagitan ng hover o automatic na animation.

 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}
  • Ipinapakita ang klaseng .cube sa 3D dahil nakatakda ang transform-style nito sa preserve-3d.
  • Bawa't mukha ng cube ay inilalapit palabas mula sa gitna ng cube gamit ang translateZ(100px), na bumubuo ng 3D cube.
  • Ang rotateCube na animation ay awtomatikong umiikot sa cube gamit ang kombinasyon ng Y at X axes.

Nagbabago ang viewpoint gamit ang perspective

Ang pagbabawas ng halaga ng perspective ay nagpapalapit ng viewpoint sa elemento, pinapalakas ang lalim at pinapahusay ang 3D effect. Sa kabilang banda, ang pagtaas ng halaga ay inilalayo ang viewpoint, kaya't nagreresulta ng mas natural at banayad na 3D na anyo. Dito, palitan natin ang perspective na katangian mula 800px tungong 200px upang ipakita ang 3D animation ng cube.

1.scene {
2  perspective: 200px;
3}
  • Sa pamamagitan ng pagpapalit ng perspective na katangian mula 800px tungong 200px, napapalapit ang viewpoint at mas napapansin ang lalim.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video

Mga Katangian ng CSS na Kaugnay sa Animasyon