Warum CSS Rotation in Medien Abfrage drehen sich nicht zurück

Question

ich eine SVG haben, in der einige Elemente auf einem mediaquery gedreht abhängig, wie folgt aus:

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

Das Element ganz gut dreht, sondern (zumindest in Chrome) weigert sich zurückzugehen. Warum das? Andere Anweisungen, z. B. füllen, arbeiten in beiden Richtungen.

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

Answer 1

Ich bin mir nicht sicher, warum es nicht zurück zu drehen, aber man könnte versuchen, diese, die zurück geht, wenn das Ansichtsfenster breite

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/

Answer 2

Dies könnte bekommt eher ein SVG-Problem beim Neu-Rendering/Re-Drawing.

Hier ist ein Beispiel eines div anstelle: 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); 
    } 

}