CODEWITHSUNDEEP
htmlcss
Mattka
Mattka

Reputation: 37

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

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 class="rotate"></div>

Upvotes: 1

Views: 227

Answers (2)

Mubeen Ahmad
Mubeen Ahmad

Reputation: 438

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 class="rotate"></div>
<div class="rac"></div>

Upvotes: 3

Evren
Evren

Reputation: 4410

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 class="rotate"></div>
</html>

Upvotes: -1

Related Questions