为什么媒体查询中的 CSS 旋转不旋转回来答案

【问题标题】：Why does CSS rotation in media query not rotate back为什么媒体查询中的 CSS 旋转不旋转回来
【发布时间】：2014-06-26 03:59:44
【问题描述】：

我有一个 SVG，其中一些元素根据媒体查询进行旋转，如下所示：

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

元素旋转得很好，但（至少在 Chrome 中）它拒绝返回。这是为什么？其他指令（例如填充）可以双向工作。

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

编辑：导致此错误的原因已在 Chrome 中修复。在 v79+（2020 年初）中，该问题不再存在。

【问题讨论】：

在 Firefox 上为我工作，其余前缀在您的小提琴中提供。
不错，在 Firefox 中有效，但在 Chrome 中似乎无效
转换似乎在 IE 中根本不起作用——也许 IE 还不支持对 SVG 元素进行转换。不过，Chrome 的行为只是奇怪，但话说回来，Chrome 总是有奇怪的行为。
这更正了 chrome 中的错误：jsfiddle.net/webtiki/MM3VC/2
我猜 Chrome 无法在 SVG 元素上重新应用 transform: none（默认值），无论出于何种原因，对它们进行转换后，因为明确设置而不是 transform: rotate(0deg) 并不能解决它任何一个。 HTML 元素没有这个问题。

标签： css svg media-queries css-transforms

【解决方案1】：

如果您可以尝试使用display:inline，它可能会更有效。为我工作。

.verticalTop {
  transform: rotate(270deg);
}

@media (max-width: 800px) {
  .verticalTop {
    display: inline;
  }
}

【讨论】：

【解决方案2】：

这可能更像是重新渲染/重新绘制的 svg 问题。

这是一个使用 div 代替的示例：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);
    }

}

【讨论】：

是的，我很清楚它只出现在 SVG 中，因此小提琴中的例子！

【解决方案3】：

我不知道为什么它不旋转回来，但你可以试试这个，当视口变宽时会回来

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/

【讨论】：

很好的修复，但我仍然希望得到解释！