You are currently viewing How to Rotate a div in CSS | CSS Tricks
  • Post category:CSS

How to Rotate a div in CSS | CSS Tricks

Rotate div

In this article, we will show how to rotate a div in CSS. We can achieve that using the CSS “transform” property.

<!DOCTYPE html>
<html>
<head>
<title>Disable button</title>
<style type="text/css">
.rotate{
width: 200px;
height: 200px;
background-color: blue;
margin: 200px;
transition: all 0.5s ease-in-out;
}
.rotate:hover{
transform: rotate(45deg);
}
</style>

</head>
<body>
<div class="rotate"></div>

</body>
</html>

Output: Hover the below box:

See the Pen
Rotate div CSS by Wonderdevelop (@wonderdevelop)
on CodePen.

In the above, we have div with classname ‘rotate’. In CSS you can use the transform property and give the value as “rotate” in the hover. And you should give the degree value of the rotate transform as in the above code. Above code we give 45deg in the transform so, the div will rotate 45 degrees. You can give the value in degrees only.

Leave a Reply