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

Phương thức rotateY()

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.

Ví dụ minh họa

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

Phần tử #yDiv bị xoay 150 độ quanh trục dọc. Kết hợp perspective trên cha để có chiều sâu thực tế.