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로 변경하면 시점이 가까워져 더욱 깊이감 있게 표현됩니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.