为什么无论我做什么旋转功能都不起作用？

Question

当我尝试使用 transform: rotate(xDeg);（在我的例子中是 transform: rotate(90deg)）时，无论我遵循什么教程或做什么，它都不会旋转。

body {
  background-color: black;
}

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

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

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

Answer 1

您应该添加 transition 否则您将看不出差异

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>

Answer 2

当您尝试使用 transform: rotate(90Deg) 时，它会旋转，但由于是正方形，您不会看到旋转，因为它会在几分之一秒内旋转，但当您在旋转时应用过渡时，您可以清楚地看到它。

现在，如果你看看 rectangle 你就可以清楚地理解我在说什么了。

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>

为什么无论我做什么旋转功能都不起作用？

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

html

css