CSS Transform Rotate
CSS is all about presentation. Discover how CSS Transform Rotate works to transform plain HTML into a premium user experience in the guide below.
The cascading style sheet (CSS) transform rotate helps to operate and rotate the image, block of the data, and other animated containers. The rotate property is part of the transform property. The transform property works many visual effects for the image or container. The rotate property is used for rotating the element around the centre or itself.
The transform property contains the rotate property with the angle. We can use angles with clockwise and anti-clockwise directions. Sometimes, the transform property uses horizontal and vertical rotation properties with the angle.
Basic CSS Transform Rotates
The basic CSS transform "rotate" property rotates the container or image in a clockwise or anticlockwise direction.
Syntax
The transform rotate property in CSS is employed with various rotate values in the following syntaxes.
<style>
transform: rotate(angle);
</style>
- The angle parameter is essential when using the transform-rotate property.
- Both positive and negative values are valid options for the angle parameter.
Examples
The examples below demonstrate images or data depicting the rotation of the container in various directions.
Examples 1:
The upcoming instance demonstrates the rotating of a container in a clockwise direction.
<!DOCTYPE html>
<html>
<head>
<title> CSS transform rotate Property </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* Show basic CSS transform rotate Property*/
div.clip {
width: 70px;
height: 70px;
background-color: yellow;
border: 1px solid black;
display:inline-block;
transform: rotate(50deg);
}
div.clip2 {
width: 70px;
height: 70px;
background-color: yellow;
border: 1px solid black;
display:inline-block;
transform: rotate(100deg);
}
div.clip3 {
width: 70px;
height: 70px;
background-color: yellow;
border: 1px solid black;
display:inline-block;
transform: rotate(180deg);
}
.main_div {
background-color: #F4F2F2;
height:200px;
width: 300px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h4> CSS transform rotate Property </h4>
<b> we can rotate the container in positive direction </b> <br>
<br>
<div class = "clip"> Hello Students!
50deg
</div>
<div class = "clip2"> Hello Students! 100deg </div>
<div class = "clip3"> Hello Students! 180deg </div>
</div>
</body>
</html>
Output
The output shows the rotation of the container.
Examples 2:
The provided illustration demonstrates the rotation of the container in a counter-clockwise direction.
<!DOCTYPE html>
<html>
<head>
<title> CSS transform rotate Property </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* Show basic CSS transform rotate Property*/
div.clip {
width: 70px;
height: 70px;
background-color: yellow;
border: 1px solid black;
display:inline-block;
transform: rotate(-50deg);
}
div.clip2 {
width: 70px;
height: 70px;
background-color: yellow;
border: 1px solid black;
display:inline-block;
transform: rotate(-100deg);
}
div.clip3 {
width: 70px;
height: 70px;
background-color: yellow;
border: 1px solid black;
display:inline-block;
transform: rotate(-180deg);
}
.main_div {
background-color: #F4F2F2;
height:200px;
width: 300px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h4> CSS tranform rotate Property </h4>
<b> we can rotate the container in negative direction </b> <br>
<br>
<div class = "clip"> Hello Students!
-50deg
</div>
<div class = "clip2"> Hello Students! -100deg </div>
<div class = "clip3"> Hello Students! -180deg </div>
</div>
</body>
</html>
Output
The output shows the rotation of the container.
Examples 3:
The subsequent illustration demonstrates container rotation with a hover effect.
<!DOCTYPE html>
<html>
<head>
<title> CSS transform rotate Property </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* Show basic CSS transform rotate Property*/
div.clip {
width: 70px;
height: 70px;
background-color: yellow;
border: 1px solid black;
display:inline-block;
}
div.clip:hover {
transform: rotate(-50deg);
}
div.clip2 {
width: 70px;
height: 70px;
background-color: yellow;
border: 1px solid black;
display:inline-block;
}
div.clip2:hover {
transform: rotate(50deg);
}
div.clip3 {
width: 70px;
height: 70px;
background-color: yellow;
border: 1px solid black;
display:inline-block;
}
div.clip3:hover {
transform: rotate(-180deg);
}
.main_div {
background-color: #F4F2F2;
height:200px;
width: 300px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h4> CSS transform rotate Property </h4>
<b> we can rotate the container in negative direction </b> <br>
<br>
<div class = "clip"> Hello Students! -50deg
</div>
<div class = "clip2"> Hello Students! 50deg </div>
<div class = "clip3"> Hello Students! -180deg </div>
</div>
</body>
</html>
Output
The output shows the rotation of the container.
CSS 3D Transform Rotate
The fundamental CSS transform rotate attribute rotates the container or image in the specified direction for achieving 3D rotation.
Syntax
The provided syntax utilizes the transform rotates property to achieve 3D rotation.
<style>
transform: rotate3d(x,y,z,angle);
</style>
OR
<style>
transform: rotate3d(number,number,number,angle);
</style>
Description
- The x,y, and z are the axes of the image or container. The value must be in the number format.
- The angle shows a negative or positive value with the axis.
- There are three axis numbers required with the angle.
- The transform with the rotate3d property is required in CSS for 3d rotation.
Examples
The examples below illustrate the orientation along the distinct x, y, and z axes.
Examples 1:
The upcoming illustration depicts the container for rotational movement in a three-dimensional space towards a positive direction. Users have the flexibility to establish either a positive or negative axis along with a positive angle.
<!DOCTYPE html>
<html>
<head>
<title> CSS transform rotate Property </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* Show basic CSS transform rotate Property*/
div.clip {
width: 70px;
height: 70px;
background-color: aqua;
border: 1px solid black;
display:inline-block;
transform: rotate3d(1,2,0,50deg);
}
div.clip2 {
width: 70px;
height: 70px;
background-color: yellow;
border: 1px solid black;
display:inline-block;
transform: rotate3d(0,2,-3,80deg);
}
div.clip3 {
width: 70px;
height: 70px;
background-color: aqua;
border: 1px solid black;
display:inline-block;
transform: rotate3d(-1,-2,-3,70deg);
}
.main_div {
background-color: #F4F2F2;
height:200px;
width: 300px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h4> CSS transform rotate Property </h4>
<b> the property help to container for 3d rotation in positive direction </b> <br>
<br>
<div class = "clip"> Hello Students!
50deg
</div>
<div class = "clip2"> Hello Students! 80deg </div>
<div class = "clip3"> Hello Students! 70deg </div>
</div>
</body>
</html>
Output
The result displays the three-dimensional rotation of the container.
Examples 2:
The upcoming instance demonstrates the container for 3D rotation in the opposite direction. It is feasible to specify either a positive or negative axis along with a negative angle.
<!DOCTYPE html>
<html>
<head>
<title> CSS transform rotate Property </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* Show basic CSS transform rotate Property*/
div.clip {
width: 70px;
height: 70px;
background-color: aqua;
border: 1px solid black;
display:inline-block;
transform: rotate3d(1,2,0,-60deg);
}
div.clip2 {
width: 70px;
height: 70px;
background-color: yellow;
border: 1px solid black;
display:inline-block;
transform: rotate3d(0,2,-3,-80deg);
}
div.clip3 {
width: 70px;
height: 70px;
background-color: aqua;
border: 1px solid black;
display:inline-block;
transform: rotate3d(-1,-2,-3,-70deg);
}
.main_div {
background-color: #F4F2F2;
height:200px;
width: 300px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h4> CSS tranform rotate Property </h4>
<b> the property help to container for 3d rotation in negative direction </b> <br>
<br>
<div class = "clip"> Hello Students!
-60deg
</div>
<div class = "clip2"> Hello Students! -80deg </div>
<div class = "clip3"> Hello Students! -70deg </div>
</div>
</body>
</html>
Output
The result displays the three-dimensional rotation of the container.
Examples 3:
The provided demonstration illustrates the 3D rotation of the container along with a hover effect.
<!DOCTYPE html>
<html>
<head>
<title> CSS transform rotate Property </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* Show basic CSS transform rotate Property*/
div.clip {
width: 70px;
height: 70px;
background-color: aqua;
border: 1px solid black;
display:inline-block;
}
div.clip2 {
width: 70px;
height: 70px;
background-color: yellow;
border: 1px solid black;
display:inline-block;
}
div.clip3 {
width: 70px;
height: 70px;
background-color: aqua;
border: 1px solid black;
display:inline-block;
}
div.clip:hover {
transform: rotate3d(1,2,0,-60deg);
}
div.clip2:hover {
transform: rotate3d(-1,-2,-3,-70deg);}
div.clip3:hover {
transform: rotate3d(-1,-2,-3,70deg);
}
.main_div {
background-color: #F4F2F2;
height:200px;
width: 300px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h4> CSS tranform rotate Property </h4>
<b> the property help to container for 3d rotation in required direction </b> <br>
<br>
<div class = "clip"> Hello Students!
-60deg
</div>
<div class = "clip2"> Hello Students! 70deg </div>
<div class = "clip3"> Hello Students! -70deg </div>
</div>
</body>
</html>
Output
The result displays the three-dimensional rotation of the container.
Basic CSS Transform Rotates the Axis
The CSS transform property allows for the rotation of elements such as containers, images, or other components along the x, y, and z-axis.
Syntax
The transform property syntax above demonstrates 3D rotation with specified axis using the rotate transform.
<style>
transform: rotateAXIS(angle);
</style>
Description
- The AXIS means the X, Y, or Z axis of the image or container of the information.
- We can set the angle with the negative or positive value, but it does not affect the x and y axis.
- The transform with the rotateX|Y|Z property is required in CSS.
Examples
The rotate property employs a specific axis to rotate either in a clockwise or counterclockwise direction. The orientation has no impact on the rotateAXIS function.
Examples 1:
The subsequent illustration demonstrates the data tag for 3D rotation in specified orientations. It allows us to specify the angle for the x-axis.
<!DOCTYPE html>
<html>
<head>
<title> CSS transform rotate Property </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* Show basic CSS transform rotate Property*/
div.clip {
width: 70px;
height: 70px;
background-color: orange;
border: 1px solid black;
display:inline-block;
transform: rotateX(-50deg);
}
div.clip2 {
width: 70px;
height: 70px;
background-color: yellow;
border: 1px solid black;
display:inline-block;
transform: rotateX(70deg);
}
div.clip3 {
width: 70px;
height: 70px;
background-color: aqua;
border: 1px solid black;
display:inline-block;
transform: rotateX(30deg);
}
.main_div {
background-color: #F4F2F2;
height:200px;
width: 300px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h4> CSS transform rotateX() Property </h4>
<b> the property rotates for X-axis in required direction </b> <br>
<br>
<div class = "clip"> Hello Students!
50deg
</div>
<div class = "clip2"> Hello Students! 70deg </div>
<div class = "clip3"> Hello Students! 30deg </div>
</div>
</body>
</html>
Output
The result displays the container's rotation along the x-axis.
Examples 2:
The provided example demonstrates the data tag for 3D rotation in specified orientations. It allows us to define the Y-axis with the desired degree.
<!DOCTYPE html>
<html>
<head>
<title> CSS transform rotate Property </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* Show basic CSS transform rotate Property*/
div.clip {
width: 70px;
height: 70px;
background-color: orange;
border: 1px solid black;
display:inline-block;
transform: rotateY(-50deg);
}
div.clip2 {
width: 70px;
height: 70px;
background-color: yellow;
border: 1px solid black;
display:inline-block;
transform: rotateY(70deg);
}
div.clip3 {
width: 70px;
height: 70px;
background-color: aqua;
border: 1px solid black;
display:inline-block;
transform: rotateY(30deg);
}
.main_div {
background-color: #F4F2F2;
height:200px;
width: 300px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h4> CSS transform rotateY() Property </h4>
<b> the property rotates for Y-axis in required direction </b> <br>
<br>
<div class = "clip"> Hello Students!
50deg
</div>
<div class = "clip2"> Hello Students! 70deg </div>
<div class = "clip3"> Hello Students! 30deg </div>
</div>
</body>
</html>
Output
The output shows the rotation of the container in the Y-axis.
Examples 3:
The provided example demonstrates the data tag for 3D rotation in specified orientations. It allows us to establish the angle for the z-axis as needed.
<!DOCTYPE html>
<html>
<head>
<title> CSS transform rotate Property </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* Show basic CSS transform rotate Property*/
div.clip {
width: 70px;
height: 70px;
background-color: orange;
border: 1px solid black;
display:inline-block;
transform: rotateZ(-50deg);
}
div.clip2 {
width: 70px;
height: 70px;
background-color: yellow;
border: 1px solid black;
display:inline-block;
transform: rotateZ(70deg);
}
div.clip3 {
width: 70px;
height: 70px;
background-color: aqua;
border: 1px solid black;
display:inline-block;
transform: rotateZ(30deg);
}
.main_div {
background-color: #F4F2F2;
height:200px;
width: 300px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h4> CSS transform rotateZ() Property </h4>
<b> the property rotates for Z-axis in required direction </b> <br>
<br>
<div class = "clip"> Hello Students!
50deg
</div>
<div class = "clip2"> Hello Students! 70deg </div>
<div class = "clip3"> Hello Students! 30deg </div>
</div>
</body>
</html>
Output
The result demonstrates the rotation of the container along the z-axis.
Examples 4:
The upcoming illustration demonstrates a 3D rotation effect on a container when hovered over. This effect allows for rotation along the x, y, and z-axis upon hovering.
<!DOCTYPE html>
<html>
<head>
<title> CSS transform rotate Property </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* Show basic CSS transform rotate Property*/
div.clip {
width: 70px;
height: 70px;
background-color: orange;
border: 1px solid black;
display:inline-block;
}
div.clip2 {
width: 70px;
height: 70px;
background-color: yellow;
border: 1px solid black;
display:inline-block;
}
div.clip3 {
width: 70px;
height: 70px;
background-color: aqua;
border: 1px solid black;
display:inline-block;
}
div.clip:hover {
transform: rotateX(50deg);
}
div.clip2:hover {
transform: rotateY(50deg);
}
div.clip3:hover {
transform: rotateZ(50deg);
}
.main_div {
background-color: #F4F2F2;
height:200px;
width: 300px;
border : 2px solid grey;
}
</style>
</head>
<body>
<div class = "main_div">
<h4> CSS tranform rotateAXIS() Property </h4>
<b> The property rotates for all axis in the required direction with hover effect </b> <br>
<br>
<div class = "clip"> Hello Students!
50deg X-Axis
</div>
<div class = "clip2"> Hello Students! 50deg Y-Axis
</div>
<div class = "clip3"> Hello Students! 50deg Z-Axis
</div>
</div>
</body>
</html>
Output
The result displays the three-dimensional rotation of the container along with the axis.
Conclusion
CSS transform rotate is instrumental in styling and positioning elements to enhance visual appeal through rotation. This feature enables the presentation of designs and shapes at specific angles by utilizing the rotate property.
