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 CSS

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:

Disable button

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 of the div. 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.

READ ALSO  CSS Combinator Selector with Examples | Explained

Leave a Reply