Transform rotateX() — Xoay theo trục X với CSS3

Giới thiệu

Hàm rotateX(angle) xoay phần tử quanh trục X (trục ngang) trong không gian 3D. Tạo hiệu ứng "lật dọc" (vertical flip) hoặc góc nhìn từ trên/xuống.

Cú pháp

transform: rotateX(<angle>);

Ví dụ: rotateX(150deg)

<!DOCTYPE html>
<html>
<head>
  <style>
    .card {
      width: 200px;
      height: 100px;
      background: linear-gradient(135deg, #ff6b6b, #ee5253);
      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);
    }
    
    #myDiv {
      -webkit-transform: rotateX(150deg);
      transform: rotateX(150deg);
    }
    
    .scene {
      perspective: 800px;
      display: inline-block;
    }
    .scene .card {
      transform: rotateX(150deg);
    }
  </style>
</head>
<body>
  <p>Không perspective (phẳng 2D):</p>
  <div class="card">Bình thường</div>
  <div class="card" id="myDiv">rotateX(150deg) - không perspective</div>
  
  <p>Có perspective (3D thực sự):</p>
  <div class="scene">
    <div class="card">rotateX(150deg) với perspective</div>
  </div>
</body>
</html>

Perspective cho rotateX

/* Perspective trên parent — khuyên dùng */
.scene-x {
  perspective: 800px;
}
.scene-x .card {
  transform: rotateX(45deg);
}

/* Perspective trong transform */
.card-solo {
  transform: perspective(800px) rotateX(45deg);
}

So sánh rotateX vs rotateY vs rotate (2D)

Hàm	Trục xoay	Hiệu ứng	Cần perspective?
`rotate()` / `rotateZ()`	Z (vuông góc màn hình)	Xoay 2D phẳng	Không
`rotateX()`	X (ngang)	Lật dọc / nhìn từ trên/xuống	Có
`rotateY()`	Y (dọc)	Lật ngang / nhìn từ trái/phải	Có
`rotate3d(x,y,z,angle)`	Vector (x,y,z) tùy chỉnh	Xoay quanh trục tùy ý	Có

Ứng dụng thực tế

Flip card dọc: Hover xoay 180deg quanh trục X
3D Carousel: Xoay các panel quanh trục X
Dropdown/Menu: rotateX(-90deg) → 0deg (mổ từ trên xuống)
Loading spinner 3D: Cube xoay liên tục
Parallax tilt: Kết hợp rotateX/rotateY theo mouse move

Ví dụ: Dropdown mổ từ trên (rotateX)

<style>
  .dropdown {
    perspective: 500px;
  }
  .dropdown-menu {
    transform-origin: top center;
    transform: rotateX(-90deg);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.2s ease;
    transform-style: preserve-3d;
  }
  .dropdown:hover .dropdown-menu {
    transform: rotateX(0);
    opacity: 1;
  }
</style>

Lưu ý

transform-origin mặc định center center — thường đổi thành top center (cho dropdown) hoặc bottom center (cho tooltip)
backface-visibility: hidden quan trọng cho flip card 2 mặt
Tránh xoay > 90deg nếu không có backface-visibility (mặt sau sẽ hiện ngược)