Hàm CSS3 rotate3d() - Xoay trong không gian 3D

Hàm rotate3d() trong CSS dùng để xoay phần tử trong không gian 3D. Thiết lập lượng và góc xoay làm tham số.

Ví dụ 1: Xoay 3D cơ bản

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
  transform: rotate3d(1, 1, 1, 45deg);
}
.skew_img {
  transform-origin: left;
  transform: skew(-0.10turn, 30deg);
}
</style>
</head>
<body>
<h1>Học tập</h1>
<img class="demo" src="https://www.tutorialspoint.com/numpy/images/numpy-mini-logo.jpg" alt="Numpy">
<img class="skew_img" src="https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark">
</body>
</html>

Kết quả

Ví dụ 2: Xoay text

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
  transform: rotate3d(1, 2, 0, 30deg);
  color: red;
  font-family: sans-serif;
  font-size: 30px;
}
.skew_img {
  transform-origin: left;
  transform: skew(-0.10turn, 30deg);
}
</style>
</head>
<body>
<h1>Học tập</h1>
<p class="demo">Học Apache Spark</p>
<img class="skew_img" src="https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark">
</body>
</html>

Kết quả

Cú pháp:

transform: rotate3d(x, y, z, angle);

• x, y, z: Vector hướng trục xoay (0 hoặc 1, hoặc số thực)
• angle: Góc xoay (deg, rad, grad, turn)
• rotate3d(1,0,0,45deg) = rotateX(45deg)
• rotate3d(0,1,0,45deg) = rotateY(45deg)
• rotate3d(0,0,1,45deg) = rotateZ(45deg) = rotate(45deg)

Cần transform-style: preserve-3d trên cha để thấy hiệu ứng 3D thực sự.