CSS rotate3d() Function
The rotate3d() function is an inbuilt function that is used to rotate an element around a fixed axis in 3D space.
Syntax:
rotate3d( x, y, z, angle )Parameters: This function accepts four parameters as mentioned above and described below:
- x: It holds a number denoting the x-coordinate. Its value lies between 0 to 1.
- y: It holds a number denoting the y-coordinate. Its value lies between 0 to 1.
- z: It holds a number denoting the z-coordinate. Its value lies between 0 to 1.
- angle: It holds the angle of rotation. The positive angle represents a clockwise rotation and a negative angle represents a counter-clockwise rotation.
Below examples illustrate the rotate3d() function in CSS:
Example 1:
<!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>
Output: 
Example 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>
Output: 
Supported Browsers: The browsers supported by rotate3d() function are listed below:
- Google Chrome 12
- Edge 12
- Internet Explorer 10
- Firefox 10
- Safari 4
- Opera 15
CSS rotate3d() Function – FAQs
What does the rotate3d() function do in CSS?
The rotate3d() function is used with the transform property to rotate an element around a specified 3D vector defined by the X, Y, and Z axes.
How do you use the rotate3d() function in CSS?
Use transform: rotate3d(x, y, z, angle); where x, y, and z define the vector for the axis of rotation and angle specifies the rotation amount.
What are common uses of the rotate3d() function?
It is commonly used for 3D animations, rotating elements in a three-dimensional space, and creating interactive 3D effects.
Can rotate3d() be animated in CSS?
Yes, rotate3d can be animated using CSS animations or transitions, allowing for smooth 3D rotations.
Does rotate3d() affect the document flow?
Rotate3d only changes the visual appearance and does not impact the actual layout or document flow of the surrounding elements.
