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

Question

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

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

元素旋转得很好,但(至少在Chrome中)它拒绝返回.这是为什么？其他指令,例如填充,在两个方向上都有效.

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

Answer 1

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

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/