Perché rotazione CSS in media query non ruotare indietro

Question

Ho uno SVG, in cui sono ruotati alcuni elementi a seconda di una mediaquery, come questo:

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

L'elemento ruota bene, ma (almeno in Chrome) si rifiuta di tornare indietro. Perché? Altre direttive, come il riempimento, funzionano in entrambe le direzioni.

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

Answer 1

non sono sicuro perché non ruota posteriore, ma si potrebbe provare questo che va indietro quando la finestra si allarga

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

Questo potrebbe essere più di un problema svg con re-rendering/re-drawing.

Ecco un esempio utilizzando un div invece: 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); 
    } 

}