Biến đổi 3D theo trục X với CSS3

Phương thức rotateX()

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.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 200px;
      height: 100px;
      background-color: pink;
      border: 1px solid black;
    }
    div#myDiv {
      -webkit-transform: rotateX(150deg); /* Safari cũ */
      transform: rotateX(150deg);         /* Chuẩn */
    }
  </style>
</head>
<body>
  <div>tutorialspoint.com (bình thường)</div>
  <p>Xoay trục X</p>
  <div id="myDiv">tutorialspoint.com (xoay 150deg)</div>
</body>
</html>

Phần tử #myDiv xoay 150 độ quanh trục ngang. Cần perspective trên cha để thấy hiệu ứng 3D rõ rệt.