CSS 3D Transforms mở rộng 2D transforms thêm trục Z, cho phép xoay, di chuyển trong không gian 3D. Cần perspective trên container cha để thấy hiệu ứng chiều sâu.
Các hàm 3D Transform
| Hàm | Mô tả | Cú pháp |
|---|---|---|
| translate3d() | Di chuyển X, Y, Z | translate3d(tx, ty, tz) |
| translateX() | Di chuyển X | translateX(tx) |
| translateY() | Di chuyển Y | translateY(ty) |
| translateZ() | Di chuyển Z (gần/xa người xem) | translateZ(tz) |
| rotate3d() | Xoay quanh vector 3D | rotate3d(x, y, z, angle) |
| rotateX() | Xoay quanh trục X (lật dọc) | rotateX(angle) |
| rotateY() | Xoay quanh trục Y (lật ngang) | rotateY(angle) |
| rotateZ() | Xoay quanh trục Z (2D rotate) | rotateZ(angle) = rotate(angle) |
| scale3d() | Scale X, Y, Z | scale3d(sx, sy, sz) |
| scaleZ() | Scale Z | scaleZ(sz) |
| matrix3d() | Ma trận 4x4 (16 giá trị) | matrix3d(n,n,n,n, n,n,n,n, n,n,n,n, n,n,n,n) |
| perspective() | Đặt perspective cho 1 element (không phải container) | perspective(depth) |
Ví dụ mã nguồn
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; }
.scene {
width: 200px; height: 200px;
border: 1px solid #ccc;
margin: 20px;
display: inline-block;
perspective: 600px; /* QUAN TRỌNG: perspective trên container cha */
}
.card {
width: 100%; height: 100%;
background: linear-gradient(135deg, #667eea, #764ba2);
display: flex; align-items: center; justify-content: center;
color: white; font-weight: bold; font-size: 18px;
transform-style: preserve-3d; /* Giữ 3D cho con (nếu có nested) */
transition: transform 1s;
}
.scene:hover .rotateX { transform: perspective(600px) rotateX(85deg); }
.scene:hover .rotateY { transform: perspective(600px) rotateY(75deg); }
.scene:hover .translateZ { transform: perspective(600px) translateZ(-200px); }
.scene:hover .rotate3d { transform: perspective(600px) rotate3d(1, 1, 0, 45deg); }
</style>
</head>
<body>
<h1>3D Transform Functions</h1>
<div class="scene"><div class="card rotateX">rotateX(85deg)</div></div>
<div class="scene"><div class="card rotateY">rotateY(75deg)</div></div>
<div class="scene"><div class="card translateZ">translateZ(-200px)</div></div>
<div class="scene"><div class="card rotate3d">rotate3d(1,1,0,45deg)</div></div>
<p>Di chuột qua các hộp để xem hiệu ứng 3D</p>
</body>
</html>
Perspective - Then chốt của 3D
- perspective: 600px trên container cha - khoảng cách từ mắt nhìn đến màn hình (px càng nhỏ = hiệu ứng 3D càng mạnh/nghiêng hơn)
- transform: perspective(600px) trên chính element - ít dùng, cho single element
- Nếu không có perspective, 3D transform phẳng (như 2D)
transform-style: preserve-3d
- Mặc định:
flat- các con bị làm phẳng vào mặt phẳng cha preserve-3d- con giữ không gian 3D, có thể xoay độc lập- Cần thiết cho nested 3D (flip card, cube...)
backface-visibility
visible(mặc định): Mặt sau hiển thị khi xoay > 90deghidden: Ẩn mặt sau - quan trọng cho flip card
Ứng dụng thực tế
- Flip card (product card, profile card)
- 3D Carousel/Coverflow
- Cube rotation (6 faces)
- Parallax tilt effect (mousemove rotateX/rotateY)
- Page transition 3D