CSS 变换原点在 Firefox 中不起作用答案

【问题标题】：CSS Transform origin not working in firefoxCSS 变换原点在 Firefox 中不起作用
【发布时间】：2014-10-10 00:17:49
【问题描述】：

我有一个 CSS 问题； transform-origin 在 Firefox 中不起作用。该网站以 chrome 和 safari 为中心，但不以 firefox 为中心。

html {
transform: scale(0.9);
transform-origin: center top;
}

我的网站是http://test.lafsdesign.com/

如果您能帮我解决这个问题，我将不胜感激。非常感谢您。

完整的 CSS

@media screen and (max-width: 1240px) {
html {
zoom: 0.9;
-moz-transform: scale(0.9);
-moz-transform-origin: center top;
}
}
@media screen and (max-width: 1140px) {
html {
zoom: 0.8;
-moz-transform: scale(0.8);
}    
}
@media screen and (max-width: 1005px) {
html {
zoom: 0.7; 
-moz-transform: scale(0.7);
}
}
@media screen and (max-width: 880px) {
html {
zoom: 0.6; 
-moz-transform: scale(0.6);
}
}

【问题讨论】：

标签： html css firefox transform scale

【解决方案1】：

要在 Firefox 上修复此错误，您可以使用： transform-origin: center; transform-box: fill-box;

【讨论】：

【解决方案2】：

转换原点始终是某些浏览器的兼容性问题。当您使用诸如中心、顶部、底部、左侧、右侧等关键字时也是如此。

尝试以像素为单位给出所有值。所有的浏览器都会完美地理解像素。如果您是从随机原点为对象设置动画，那么您可以进入设计环境并找到原点必须位于的确切像素，并使用相同的确切值进行编码，以便始终精确并与所有浏览器兼容:)

【讨论】：

【解决方案3】：

在 Firefox 41.x 之前的 SVG 中，它仅在使用固定值时有效：

-moz-transform-origin: 25px 25px;
-ms-transform-origin:  25px 25px;
-o-transform-origin: 25px 25px;
-webkit-transform-origin:  25px 25px;
transform-origin: 25px 25px;

Firefox 不会处理 'center' 或 '50%' 等相对值。

【讨论】：

不幸的是，我在 FF 48 中没有修复它：(
FF 54 中也没有修复
在 FF 57 中仍未修复
@IlyaStreltsyn 在这里也一样，任何灵活的东西都无法正常工作。不幸的是，如果您需要响应能力，则必须使用 JavaScript。也许yoanm的想法在炒锅下，还没有测试过。
如果你想做 htmlToPdf 并使用 Qtwebkit 引擎，这解决了我的问题。

【解决方案4】：

为中心顶部提供百分比而不是位置transform-origin: 0% 50%;.. 还有一件事。 Firefox 中的 SVG 元素不支持 transform-origin。有一些解决方法。链接：https://bugzilla.mozilla.org/show_bug.cgi?id=828286 Setting transform-origin on SVG group not working in FireFox How to set transform origin in SVG希望对你有帮助

【讨论】：

Khaleel，谢谢，我已经体验到了您所写的内容，转换不适用于 Firefox（Mac 上的 54.0.1（64 位）中的 SVG 部分）。