css - 为什么媒体查询中的 CSS 旋转不会旋转回来

Question

我有一个 SVG，其中一些元素根据媒体查询旋转，如下所示:

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

元素旋转得很好，但(至少在 Chrome 中)它拒绝返回。这是为什么？其他指令(例如 fill)双向工作。

JSFiddle:http://jsfiddle.net/MM3VC/1/

编辑:Chrome 中修复了导致此错误的任何原因。在 v79+(2020 年初)中，该问题不再存在。

Answer 1

我不确定为什么它不向后旋转，但你可以试试这个，当视口(viewport)变宽时它会返回

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

http://jsfiddle.net/MM3VC/3/