Transform rotateY() — Xoay theo trục Y với CSS3

Giới thiệu

Hàm rotateY(angle) xoay phần tử quanh trục Y (trục dọc) trong không gian 3D. Tạo hiệu ứng "lật ngang" (horizontal flip). Cần perspective trên parent hoặc trong transform để thấy hiệu ứng 3D.

Cú pháp

transform: rotateY(<angle>);
/* angle: deg, grad, rad, turn */

Ví dụ: rotateY(150deg)

<!DOCTYPE html>
<html>
<head>
  <style>
    .card {
      width: 200px;
      height: 100px;
      background: linear-gradient(135deg, #667eea, #764ba2);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-family: system-ui, sans-serif;
      font-weight: 600;
      margin: 20px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    }
    
    #yDiv {
      -webkit-transform: rotateY(150deg);
      transform: rotateY(150deg);
      /* Cần perspective trên parent hoặc trong transform */
    }
    
    /* Container có perspective */
    .scene {
      perspective: 800px;
      display: inline-block;
    }
    .scene .card {
      transform: rotateY(150deg);
    }
  </style>
</head>
<body>
  <p>Không có perspective (phẳng):</p>
  <div class="card">Bình thường</div>
  <div class="card" id="yDiv">rotateY(150deg) - không perspective</div>
  
  <p>Có perspective trên parent (3D thực sự):</p>
  <div class="scene">
    <div class="card">rotateY(150deg) với perspective</div>
  </div>
</body>
</html>

Perspective — Yếu tố then chốt cho 3D

/* Cách 1: Perspective trên parent (khuyên dùng) */
.scene {
  perspective: 800px;  /* Khoảng cách mắt đến màn hình (px) */
}
.scene .element {
  transform: rotateY(45deg);
}

/* Cách 2: Perspective trong transform (cho 1 element) */
.element {
  transform: perspective(800px) rotateY(45deg);
}

/* Giá trị perspective nhỏ = góc nhìn rộng (fish-eye) */
/* Giá trị perspective lớn = góc nhìn hẹp (telephoto) */

Ứng dụng: Flip Card 3D

<style>
  .flip-card {
    perspective: 1000px;
    width: 300px; height: 200px;
  }
  .flip-card-inner {
    position: relative;
    width: 100%; height: 100%;
    transform-style: preserve-3d;  /* QUAN TRỌNG: giữ 3D cho con */
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%; height: 100%;
    backface-visibility: hidden;  /* Ẩn mặt sau khi xoay */
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
  }
  .flip-card-front { background: #667eea; color: white; }
  .flip-card-back { background: #764ba2; color: white; transform: rotateY(180deg); }
</style>

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">Mặt trước</div>
    <div class="flip-card-back">Mặt sau</div>
  </div>
</div>

Lưu ý

• Khác với rotate() (2D, trục Z) — rotateY() là 3D thực sự
• Phải có perspective (trên ancestor hoặc trong transform) mới thấy chiều sâu
• backface-visibility: hidden ẩn mặt sau khi xoay > 90°
• transform-style: preserve-3d trên parent để con không bị flatten
• Performance: Transform 3D dùng GPU (compositor thread) — mượt mà