Tại sao CSS luân phiên trong truy vấn phương tiện truyền thông không xoay lại

Question

Tôi có một SVG, trong đó một số yếu tố được luân chuyển tùy thuộc vào một mediaquery, như thế này:

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

Yếu tố xoay tốt, nhưng (ít nhất là trong Chrome) nó từ chối quay trở lại. Tại sao vậy? Các chỉ thị khác, chẳng hạn như điền, làm việc theo cả hai hướng.

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

Answer 1

Tôi không chắc chắn lý do tại sao nó không xoay trở nhưng bạn có thể thử loại này mà đi trở lại khi các khung nhìn được rộng hơn

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

sức này được nhiều hơn một vấn đề svg với tái rendering/tái vẽ.

Dưới đây là một ví dụ sử dụng một div thay vì: 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); 
    } 

}