Hàm rotate3d() là một hàm dựng sẵn dùng để xoay một phần tử quanh trục cố định trong không gian 3D.
Cú pháp:
rotate3d( x, y, z, angle )
Tham số: Hàm này chấp nhận bốn tham số như đã đề cập ở trên và được mô tả dưới đây:
- x: Nó giữ một số biểu thị tọa độ x. Giá trị của nó nằm trong khoảng từ 0 đến 1.
- y: Nó giữ một số biểu thị tọa độ y. Giá trị của nó nằm trong khoảng từ 0 đến 1.
- z: Nó giữ một số biểu thị tọa độ z. Giá trị của nó nằm trong khoảng từ 0 đến 1.
- angle: Nó giữ góc xoay. Góc dương biểu thị xoay theo chiều kim đồng hồ. Góc âm biểu thị xoay ngược chiều kim đồng hồ.
Các ví dụ dưới đây minh họa hàm rotate3d() trong CSS:
Ví dụ 1:
html<!DOCTYPE html>
<html>
<head>
<title>CSS rotate3d() function</title>
<style>
body {
text-align:center;
}
h1 {
color:green;
}
.rotate3d_image {
transform: rotate3d(1, 1, 0, 60deg);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>CSS rotate3d() function</h2>
<br><br>
<img class="rotate3d_image" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="GeeksforGeeks logo">
</body>
</html>
Đầu ra: 
Ví dụ 2:
<!DOCTYPE html>
<html>
<head>
<title>CSS rotate3d() function</title>
<style>
body {
text-align:center;
}
h1 {
color:green;
}
.GFG {
font-size:35px;
font-weight:bold;
color:green;
transform: rotate3d(1, 1, 0, 60deg);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>CSS rotate3d() function</h2>
<br><br>
<div class="GFG">Welcome to GeeksforGeeks</div>
</body>
</html>
Đầu ra: 
Trình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi hàm rotate3d() được liệt kê dưới đây:
- Google Chrome 12
- Edge 12
- Internet Explorer 10
- Firefox 10
- Safari 4
- Opera 15