CSS 3D Transforms
Through the transform property, an element can be moved, rotated, scaled or skewed, in 2D as well as 3D.
CSS 3D Transforms Functions
For 3D transformations, transform takes the functions below:
rotateX()rotateY()rotateZ()
The CSS rotateX() Function
Spinning around the X-axis is the job of rotateX(), which takes the amount of rotation in degrees.
Example
Prompt
Create a page with a div element styled with a background color. Apply a CSS 3D transform using rotateX(150deg) to rotate it around the X-axis.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS rotateX()</title>
<style>
#myDiv {
width: 100px;
height: 100px;
background-color: #4CAF50;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 50px;
transform: rotateX(150deg);
}
</style>
</head>
<body>
<h1>The rotateX() Function</h1>
<div id="myDiv">Hello</div>
</body>
</html>
The CSS rotateY() Function
Pass a degree value to rotateY() and the element turns around its Y-axis by that much.
Example
Prompt
Create a page with a div element styled with a background color. Apply a CSS 3D transform using rotateY(150deg) to rotate it around the Y-axis.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS rotateY()</title>
<style>
#myDiv {
width: 100px;
height: 100px;
background-color: #4CAF50;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 50px;
transform: rotateY(150deg);
}
</style>
</head>
<body>
<h1>The rotateY() Function</h1>
<div id="myDiv">Hello</div>
</body>
</html>
The CSS rotateZ() Function
With rotateZ(), the axis of rotation is the element's Z-axis, and the angle is again given in degrees.
Example
Prompt
Create a page with a div element styled with a background color. Apply a CSS 3D transform using rotateZ(90deg) to rotate it around the Z-axis.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS rotateZ()</title>
<style>
#myDiv {
width: 100px;
height: 100px;
background-color: #4CAF50;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 50px;
transform: rotateZ(90deg);
}
</style>
</head>
<body>
<h1>The rotateZ() Function</h1>
<div id="myDiv">Hello</div>
</body>
</html>