Articles
Giới thiệu về CSS
Các thuộc tính CSS liên quan đến hoạt ảnh 3D

Các thuộc tính CSS liên quan đến hoạt ảnh 3D

Bài viết này giải thích các thuộc tính CSS liên quan đến hoạt ảnh 3D.

Chúng tôi sẽ giải thích cách hoạt động của hoạt ảnh 3D trong CSS và cách sử dụng chúng với các ví dụ mã thực tế. Bạn sẽ học cách áp dụng các phép biến đổi 3D bằng thuộc tính transform và cách thêm chiều sâu và hiệu ứng ba chiều với perspective và transform-style.

YouTube Video

HTML để Xem trước

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>

Hoạt ảnh và chuyển đổi 3D

Các trình duyệt web hiện đại cho phép bạn tạo hoạt ảnh 3D ba chiều chỉ bằng CSS. Vì bạn có thể tạo ra các tương tác nhẹ và hấp dẫn về mặt thị giác mà không cần sử dụng JavaScript, điều này góp phần cải thiện UI/UX.

Cách hoạt ảnh 3D hoạt động

Hoạt ảnh 3D trong CSS chủ yếu sử dụng các thuộc tính sau:.

  • Thuộc tính transform thay đổi vị trí, xoay và tỷ lệ của các phần tử.
  • Thuộc tính perspective thiết lập khoảng cách góc nhìn để thể hiện chiều sâu 3D.
  • Thuộc tính transform-style xác định liệu các phần tử con có được biến đổi trong không gian 3D hay không.
  • Thuộc tính backface-visibility kiểm soát sự hiển thị của mặt sau phần tử.
  • Thuộc tính animation và transition được sử dụng để định nghĩa hoạt ảnh.

@keyframes và Hoạt ảnh 3D

Xoay quanh trục Y

Hãy bắt đầu bằng cách định nghĩa một hoạt ảnh 3D xoay một phần tử quanh trục Y bằng @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}
  • Hoạt ảnh rotateY3D xoay phần tử 360 độ quanh trục Y.
  • Thuộc tính transform-style được đặt là preserve-3d để duy trì các biến đổi 3D cho các phần tử con.
  • Thuộc tính perspective thiết lập khoảng cách góc nhìn để điều chỉnh cảm giác về chiều sâu. Ở đây, giá trị 800px được đặt.

Xoay quanh trục X

Hãy cùng định nghĩa một hoạt ảnh 3D xoay phần tử quanh trục 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}
  • Hoạt ảnh rotateX3D xoay phần tử 360 độ quanh trục X.

Xoay quanh cả trục X và trục Y

Hãy định nghĩa một hoạt ảnh 3D kết hợp xoay trên cả trục X và trục 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}
  • Xoay trên nhiều trục tạo ra hiệu ứng 3D mạnh mẽ hơn.

Lật trước và sau của thẻ 3D

Hãy định nghĩa hiệu ứng hoạt ảnh hover lật trước và sau của thẻ 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}
  • Bằng cách đặt thuộc tính backface-visibility thành hidden, mặt sau được ngăn không cho xuất hiện ở mặt trước.
  • Áp dụng rotateY(180deg) cho lớp .card-back sẽ tạo mặt sau của thẻ.
  • Áp dụng rotateY(180deg) khi hover sẽ lật thẻ.

Hoạt ảnh hình lập phương 3D

Hãy định nghĩa một hoạt ảnh 3D cho hình lập phương. Mỗi mặt của hình lập phương sẽ xuất hiện khi xoay, thể hiện hiệu ứng 3D thông qua hover hoặc hoạt ảnh tự động.

 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}
  • Lớp .cube được hiển thị ở định dạng 3D vì thuộc tính transform-style của nó được đặt là preserve-3d.
  • Mỗi mặt của hình lập phương được đẩy về phía trước từ tâm lập phương bằng translateZ(100px), tạo thành một hình lập phương 3D.
  • Hoạt ảnh rotateCube sẽ tự động xoay hình lập phương bằng cách kết hợp trục Y và trục X.

Góc nhìn thay đổi với perspective

Giảm giá trị perspective sẽ đưa góc nhìn gần hơn tới phần tử, làm nổi bật chiều sâu và tăng hiệu ứng 3D. Ngược lại, tăng giá trị này sẽ đẩy góc nhìn ra xa phần tử hơn, mang lại diện mạo 3D tự nhiên và tinh tế hơn. Ở đây, hãy thay đổi thuộc tính perspective từ 800px sang 200px để hiển thị hoạt ảnh 3D của hình lập phương.

1.scene {
2  perspective: 200px;
3}
  • Bằng cách thay đổi thuộc tính perspective từ 800px sang 200px, góc nhìn sẽ gần hơn và chiều sâu được nhấn mạnh hơn.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

Các thuộc tính CSS liên quan đến hoạt hình