CSS rotate失效：@media查询1028px断点下图片旋转样式无法重置求助

架构老林

2026-10-30

问题定位与修复

核心错误点

媒体查询内的选择器存在语法书写bug：你写的选择器为.title-image:{，类名和规则块之间多了一个无意义的冒号，浏览器会直接判定这整条CSS规则为无效语法，完全跳过解析。这就是为什么媒体查询里写的样式根本没作用到图片上——规则压根没生效，原有的position: absolute属性没有被改成静态定位，图片在小屏幕下因为父容器宽度收缩，直接溢出顶部区块掉到下方容器里。
厂商前缀漏写：基础样式里的transform属性带了全量浏览器兼容前缀，但媒体查询里重置旋转值时只写了无前缀的transform: rotate(0)。在旧版本内核的浏览器中，带厂商前缀的transform值优先级更高，会覆盖无前缀的重置值，哪怕选择器语法正确，旋转效果也可能无法正常清除。
基础样式存在不规范书写：原代码里的-webkit-transform:rotate (25deg)中，rotate函数和括号之间多了空格，虽然多数浏览器能容错，但在严格解析模式下可能触发异常。

修复后的完整代码

/* title-image 基础样式 */
.title-image{
  width:60%;
  -ms-transform: rotate(25deg); /* IE 9 */
  -moz-transform: rotate(25deg);
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg);
  position: absolute;
  right: 30%;
}

@media (max-width: 1028px){
  .title-image {
    position: static;
    -ms-transform: rotate(0);
    -moz-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}