CSS媒体查询中rotate属性不生效 无法实现盒子旋转效果求助

你遇到的问题是CSS语法书写不规范导致的：媒体查询内transform: rotate (0);中，rotate函数名和左括号之间多了1个空格。CSS中属性值的函数要求函数名必须紧跟参数括号，二者之间存在空格时浏览器会无法识别该函数，直接判定整条transform声明无效，因此只有旋转规则不生效，其他无语法错误的样式可以正常加载。

删除rotate和左括号之间的空格即可，修正后的完整代码如下：

.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;
  }
}

内容的提问来源于stack exchange，提问作者jom8