为什么媒体查询中的CSS旋转没有向后旋转

我有一个SVG，其中一些元素根据mediaquery进行旋转，如下所示：

@media (max-width: 480px) {
    rect {
        transform: rotate(10deg);
    }
}

元素旋转得很好，但（至少在Chrome中）它拒绝返回。为什么呢？其他指令（如fill）在两个方向上都起作用

JSFiddle：

---

编辑：导致这个错误的原因已经在Chrome中修复。在v79+（2020年初）中，这个问题不再存在。

我不确定它为什么不向后旋转，但您可以尝试在视口变宽时向后旋转

rect {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
}

@media (max-width: 480px) {
    rect {
         fill: red;
        -webkit-transform: rotate(10deg);
        -moz-transform: rotate(10deg);
        -o-transform: rotate(10deg);
        -ms-transform: rotate(10deg);
        transform: rotate(10deg);
    }
}

---

这可能是一个svg问题，需要重新呈现/重新绘制

下面是一个使用div的示例：

---

}

如果您可以尝试使用

display:inline

它可能更有效。 用这个为我工作

.verticalTop {
  transform: rotate(270deg);
}

@media (max-width: 800px) {
  .verticalTop {
    display: inline;
  }
}

---

我在Firefox上可以使用fiddle中提供的其他前缀。没错，在Firefox中可以使用，但在Chrome中不可以，它看起来在IE中根本不起作用-也许IE还不支持SVG元素上的转换。虽然Chrome的行为很奇怪，但是，Chrome总是有奇怪的行为。这纠正了Chrome中的错误：我猜Chrome在对SVG元素应用变换后，无论出于何种原因，都无法重新应用变换：无（默认值），因为显式地设置它而不是变换：旋转（0deg）也无法修复。HTML元素没有这个问题。修复得很好，尽管我仍然希望得到解释！是的，我很清楚它只出现在SVG中，因此在fiddle中有一个例子！

.verticalTop {
  transform: rotate(270deg);
}

@media (max-width: 800px) {
  .verticalTop {
    display: inline;
  }
}