why is the rotate function not working no matter what i do?-CodePudding

When I try to use the transform: rotate(xDeg); (in my case transform: rotate(90deg)) it just doesn't rotate no matter what tutorial I follow or what I do.

body {
  background-color: black;
}

.rotate {
  width: 200px;
  height: 200px;
  background-color: red;
  margin: 200px;
}

.rotate:hover {
  transform: rotate(90deg);
}

<div ></div>

CodePudding user response：

When you try to use the transform: rotate(90Deg) it rotates but due to square you will not see the rotation because it rotates in a fraction of seconds but when you apply transition on rotating you can see it clearly.

Now, if you look at the rectangle you can understand clearly what I'm talking about.

body {
  display: grid;
  place-items: center;
  background-color: black;
}

.rotate {
  width: 200px;
  height: 200px;
  background-color: red;
  margin: 20px;
}

.rotate:hover {
  transform: rotate(90deg);
  transition: all 0.5s ease;
}

.rac {
  width: 200px;
  height: 100px;
  background-color: red;
  margin: 50px 20px;
}

.rac:hover {
  transform: rotate(90deg);
}

<div ></div>
<div ></div>

CodePudding user response：

You should add transition otherwise you will not see the difference

body{
  background-color:black;
}

.rotate {
  width:200px;
  height:200px;
  background-color:red;
  margin:200px;
  transition: transform .5s ease-in-out;
}

.rotate:hover {
  transform: rotate(90deg);
}

<html>
<link rel="stylesheet" type="text/css" href="e.css">
<div ></div>
</html>