无法让框在媒体查询中旋转

Question

我只是在 codeply 上尝试这个练习。在视口减小到小于 1000px 的宽度后，我试图让这个框旋转到 0。出于某种原因，所有其他更改似乎都有效，但轮换无效。关于为什么的任何想法？

感谢您的帮助。

这是我的代码：

.red {
background-color:red;
width:100px;
height:100px;
transform: rotate(25deg);
}

@media screen and (max-width: 1000px){
h1 {
    color: red;
    font-size:60px;
}

.red {
  transform: rotate (0);
  background-color:green;
  position: relative;
  left:300px;
}
}

Answer 1

您的 css 中有错字。

你的 CSS：

.red {
  transform: rotate (0);
  background-color:green;
  position: relative;
  left:300px;
}

rotate 和 (0) 之间有一个空格

正确的css：

.red {
  transform: rotate(0);
  background-color:green;
  position: relative;
  left:300px;
}