Transform scaleZ() — Tỷ lệ theo trục Z với CSS3

Giới thiệu

Hàm scaleZ(z) thay đổi tỷ lệ của phần tử theo trục Z (chiều sâu). Chỉ có hiệu ứng nhìn thấy được khi kết hợp với 3D transform (perspective, rotateX/Y, translateZ).

Cú pháp

transform: scaleZ(<number>);

• z: Hệ số tỷ lệ (number). 1 = gốc, >1 = phóng to chiều sâu, <1 = thu nhỏ chiều sâu
• Không tác động lên hình dạng 2D nếu không có perspective/3D context

Ví dụ: So sánh có/không scaleZ với perspective

<!DOCTYPE html>
<html>
<head>
  <style>
    .scene {
      perspective: 200px;           /* Tạo không gian 3D */
      display: inline-block;
      margin: 20px;
    }
    
    .box {
      width: 60px; height: 60px;
      background: #3498db;
      transform-style: preserve-3d;
    }
    
    .original { background: #2c3e50; }
    
    .translated {
      background: #f39c12;
      transform: perspective(200px) translateZ(-150px);
    }
    
    .scaled-translated {
      background: #e74c3c;
      transform: perspective(200px) scaleZ(2) translateZ(-150px);
    }
  </style>
</head>
<body>
  <div class="scene">
    <div class="box original">Gốc</div>
  </div>
  
  <div class="scene">
    <div class="box translated">translateZ(-150px)</div>
  </div>
  
  <div class="scene">
    <div class="box scaled-translated">scaleZ(2) + translateZ(-150px)</div>
  </div>
</body>
</html>

Giải thích ví dụ

• perspective(200px): Tạo điểm nhìn ở 200px trước màn hình
• translateZ(-150px): Đẩy element lùi xa 150px (xa viewer) → hiện nhỏ hơn
• scaleZ(2): Phóng to chiều sâu gấp 2 lần → element lùi xa thêm → hiện nhỏ hơn nữa

Lưu ý quan trọng

• scaleZ() không làm thay đổi kích thước 2D của element trên màn hình
• Chỉ ảnh hưởng đến vị trí trong không gian 3D và cách các element con 3D hiển thị
• Cần transform-style: preserve-3d trên parent để con giữ 3D context
• Ít dùng độc lập — thường dùng trong chuỗi transform 3D phức tạp

Ứng dụng thực tế

• 3D carousel / cube rotation (scaleZ cho mặt sau)
• Parallax depth effect
• 3D transform animation phức tạp
• CSS 3D engine / WebGL fallback