Why does CSS rotation in media query not rotate back

问题

I have an SVG, in which some elements are rotated depending on a mediaquery, like this:

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

The element rotates just fine, but (at least in Chrome) it refuses to go back. Why is that? Other directives, such as fill, work in both direction.

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

回答1:

I'm not sure why it doesn't rotate back but you could try this which goes back when the viewport gets wider

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/

回答2:

This might be more of an svg issue with re-rendering/re-drawing.

Here is an example using a div instead: http://jsfiddle.net/avera813/26eDr/

  .bar {
    width:10px;
    height:50px;
    background-color:orange;
    display:block;
  }

  @media (max-width: 480px) {
    .bar {
      background-color: red;
      -webkit-transform: rotate(10deg);
      -moz-transform: rotate(10deg);
      -o-transform: rotate(10deg);
      -ms-transform: rotate(10deg);
      transform: rotate(10deg);
    }

}

来源：https://stackoverflow.com/questions/23547211/why-does-css-rotation-in-media-query-not-rotate-back