CSS 3D Transforms là một kỹ thuật trong CSS cho phép bạn tạo ra các hiệu ứng 3D như xoay, lật, và dịch chuyển phần tử trong không gian ba chiều, mang đến chiều sâu và sự cuốn hút cho giao diện web. Sử dụng CSS 3D Transforms giúp bạn thiết kế các hiệu ứng chuyển động đẹp mắt mà không cần đến JavaScript. Bài viết này sẽ giới thiệu các thuộc tính cơ bản của CSS 3D Transforms và cung cấp các ví dụ minh họa để bạn dễ dàng ứng dụng.

Đây là một phần trong chuỗi bài học trên "codetuthub.com", với các bài viết liên quan như CSS 2D Transforms, CSS Animations, và CSS Transitions.

1. Tổng quan về CSS 3D Transforms

CSS 3D Transforms cho phép bạn thực hiện các thao tác như xoay và dịch chuyển phần tử trong không gian 3 chiều. Khi bạn áp dụng phép biến đổi 3D, bạn có thể thay đổi cả ba trục:

  • X-axis: Trục nằm ngang.
  • Y-axis: Trục dọc.
  • Z-axis: Trục sâu (chỉ có trong không gian 3D).

Kích hoạt không gian 3D với transform-style: preserve-3d

Để phần tử và các phần tử con hiển thị trong không gian 3D, bạn cần thêm transform-style: preserve-3d.

css
.container {
    transform-style: preserve-3d;
}

2. Xoay phần tử với rotate3d(), rotateX(), rotateY(), rotateZ()

CSS cung cấp các hàm xoay 3D như rotate3d(), rotateX(), rotateY(), và rotateZ() để xoay phần tử xung quanh các trục trong không gian ba chiều.

Cú pháp cơ bản của rotate3d()

css
transform: rotate3d(x, y, z, angle);
  • x, y, z: Xác định trục xoay (ví dụ: 1, 0, 0 cho trục X).
  • angle: Góc xoay (đơn vị deg).

Ví dụ xoay phần tử theo trục X và Y

css
.rotate-x {
    transform: rotateX(45deg);
}

.rotate-y {
    transform: rotateY(45deg);
}

Trong ví dụ này, .rotate-x xoay 45 độ quanh trục X và .rotate-y xoay 45 độ quanh trục Y, tạo hiệu ứng 3D cho phần tử.

3. Dịch chuyển phần tử với translate3d()

translate3d() cho phép bạn dịch chuyển phần tử trên cả ba trục X, Y và Z, tạo chiều sâu cho hiệu ứng dịch chuyển.

Cú pháp

css
transform: translate3d(x, y, z);
  • x: Khoảng cách dịch chuyển theo trục X.
  • y: Khoảng cách dịch chuyển theo trục Y.
  • z: Khoảng cách dịch chuyển theo trục Z.

Ví dụ dịch chuyển phần tử

css
.translate-3d {
    transform: translate3d(20px, 30px, 50px);
}

Trong ví dụ này, .translate-3d sẽ di chuyển 20px trên trục X, 30px trên trục Y và 50px trên trục Z, tạo cảm giác phần tử nổi lên trên trang.

4. Phóng to, thu nhỏ trong không gian 3D với scale3d()

scale3d() cho phép bạn phóng to hoặc thu nhỏ phần tử trên cả ba trục, tạo hiệu ứng chiều sâu và độ lớn trong không gian 3 chiều.

Cú pháp

css
transform: scale3d(x, y, z);
  • x: Tỷ lệ phóng to hoặc thu nhỏ theo trục X.
  • y: Tỷ lệ phóng to hoặc thu nhỏ theo trục Y.
  • z: Tỷ lệ phóng to hoặc thu nhỏ theo trục Z.

Ví dụ phóng to phần tử trong không gian 3D

css
.scale-3d {
    transform: scale3d(1.2, 1.2, 1.2);
}

Trong ví dụ này, phần tử .scale-3d sẽ phóng to 1.2 lần trên tất cả các trục.

5. Điều chỉnh điểm tham chiếu với perspective và transform-origin

perspective và transform-origin giúp bạn kiểm soát cách hiển thị phần tử 3D, đặc biệt khi xoay và di chuyển trong không gian 3 chiều.

Perspective

perspective xác định khoảng cách từ mắt người nhìn đến phần tử 3D, càng nhỏ thì góc nhìn càng rõ.

Cú pháp

css
perspective: value;
  • value: Khoảng cách từ mắt người nhìn (đơn vị px).

Ví dụ:

css
.container {
    perspective: 600px;
}

Transform-origin

transform-origin xác định điểm gốc của phép biến đổi, giúp bạn kiểm soát điểm xoay của phần tử.

css
.rotate-3d {
    transform-origin: left;
    transform: rotateY(60deg);
}

Trong ví dụ trên, phần tử .rotate-3d xoay quanh mép trái, tạo cảm giác phần tử xoay từ trái sang phải.

6. Hiệu ứng lật thẻ (Flip Card) trong không gian 3D

Một trong những ứng dụng phổ biến nhất của CSS 3D Transforms là hiệu ứng lật thẻ (flip card). Đây là cách tạo hiệu ứng lật qua trục Y để hiển thị mặt trước và mặt sau của phần tử.

Cấu trúc HTML cho Flip Card

html
Thử online
<div class="flip-card">
    <div class="flip-card-inner">
        <div class="flip-card-front">
            <!-- Nội dung mặt trước -->
        </div>
        <div class="flip-card-back">
            <!-- Nội dung mặt sau -->
        </div>
    </div>
</div>

CSS cho Flip Card

css
.flip-card {
    perspective: 1000px;
    width: 200px;
    height: 300px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.flip-card-back {
    transform: rotateY(180deg);
}

Trong ví dụ trên:

  • .flip-card sử dụng perspective để tạo hiệu ứng 3D.
  • Khi người dùng di chuột vào .flip-card, phần tử .flip-card-inner sẽ xoay 180 độ theo trục Y, hiển thị mặt sau của thẻ.

7. Kết hợp CSS 3D Transforms với CSS Transitions và Animations

CSS 3D Transforms tạo hiệu ứng đẹp mắt khi kết hợp với transition và animation. Điều này giúp bạn tạo ra các chuyển động 3D mượt mà.

Ví dụ tạo hiệu ứng xoay 3D với animation

css
@keyframes rotate3d {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}

.rotate-animation {
    width: 100px;
    height: 100px;
    background-color: #e74c3c;
    animation: rotate3d 2s linear infinite;
}

Trong ví dụ này, phần tử .rotate-animation sẽ xoay 360 độ theo trục Y trong 2 giây và lặp lại vô hạn.

8. Ứng dụng thực tế của CSS 3D Transforms trong thiết kế

8.1 Hiệu ứng hover 3D cho nút bấm

css
.button-3d {
    padding: 10px 20px;
    background-color: #3498db;
    color: #fff;
    border: none;
    transition: transform 0.3s ease;
}

.button-3d:hover {
    transform: translateZ(10px);
}

8.2 Tạo hình khối 3D đơn giản

Bạn có thể tạo hình khối bằng cách ghép nhiều mặt lại với nhau và sử dụng CSS 3D Transforms để điều chỉnh vị trí các mặt trong không gian 3 chiều.

css
.cube {
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    transform: rotateX(45deg) rotateY(45deg);
}

.face {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #ddd;
}

9. Kết luận

CSS 3D Transforms là công cụ mạnh mẽ cho phép bạn tạo ra các hiệu ứng sống động và đầy sáng tạo trong thiết kế giao diện web. Bằng cách sử dụng các thuộc tính xoay, dịch chuyển và phóng to, bạn có thể tạo chiều sâu và sự tương tác hấp dẫn mà không cần đến JavaScript. Để học thêm về các hiệu ứng chuyển động và hình ảnh khác trong CSS, hãy xem các bài học bổ sung trên "codetuthub.com" như CSS Transitions, CSS Animations, và CSS 2D Transforms.