CSS Transform Rotate

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 following syntaxes use the transform rotate property in the CSS with different rotate properties.

<style>
transform: rotate(angle);
</style>

Description

The angle is a required parameter for the transform-rotate property.
We can use positive and negative values in the angle parameter.

Examples

The following examples show the image or data of the container rotation in different directions.

Examples 1:

The following example shows the container rotation in positive directions.

<!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 following example shows the container rotation in negative directions.

<!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 following example shows the 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 basic CSS transform rotates property and the container or image in the required direction for the 3D rotation.

Syntax

The following syntax uses the transform rotates property for 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 following examples show the direction with the different x, y, and z axes.

Examples 1:

The following example shows the container for 3d rotation in positive directions. We can set a positive or negative axis 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 output shows the 3d rotation of the container.

Examples 2:

The following example shows the container for 3d rotation in negative directions. We can set a positive or negative axis 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 output shows the 3d rotation of the container.

Examples 3:

The following example shows the container's 3D 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: 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 output shows the 3D rotation of the container.

Basic CSS Transform Rotates the Axis

The CSS transform rotates the property, container, or image with the x, y, and z-axis.

Syntax

The following syntax uses the transform rotates property for 3d rotation with the axis.

<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 uses a particular axis to rotate clockwise or anticlockwise. The direction does not affect the rotateAXIS() method.

Examples 1:

The following example shows the information tag for 3d rotation in the required directions. We can set the x-axis with the required 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: 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 output shows the rotation of the container on the x-axis.

Examples 2:

The following example shows the information tag for 3d rotation in the required directions. We can set the Y-axis with the required 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: 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 following example shows the information tag for 3d rotation in the required directions. We can set the z-axis with the required 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: 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 output shows the rotation of the container in the z-axis.

Examples 4:

The following example shows the container 3d rotation with hover effect. We can hover rotation with the x, y, and z-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;
}
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 output shows the 3d rotation of the container with the axis.

Conclusion

CSS transform rotate helps to design and place tags to make attractive functions with the angle. It helps to show design and shapes at the required angle with the rotate property.

Next TopicCSS Tricks for Flexbox

← prev next →