我有一个SVG,其中一些元素根据媒体查询旋转,如下所示：
@media (max-width: 480px) {
rect {
transform: rotate(10deg);
}
}
元素旋转得很好,但(至少在Chrome中)它拒绝返回.这是为什么？其他指令,例如填充,在两个方向上都有效.
JSFiddle：http://jsfiddle.net/MM3VC/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);
}
}
