Xoay phần tử theo trục Z với CSS3

Phương thức rotateZ()

Sử dụng rotateZ(angle) để xoay phần tử quanh trục Z (trục vuông góc với màn hình) trong không gian 3D.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 200px;
      height: 100px;
      background-color: pink;
      border: 1px solid black;
    }
    div#zDiv {
      -webkit-transform: rotateZ(90deg); /* Safari cũ */
      transform: rotateZ(90deg);         /* Cú pháp chuẩn */
    }
  </style>
</head>
<body>
  <p>Xoay quanh trục Z</p>
  <div id="zDiv">tutorialspoint.com</div>
</body>
</html>

Phần tử bị xoay 90 độ theo chiều kim đồng hồ. Tương đương với rotate(90deg) trong biến đổi 2D.