CSS转换起源不适用于firefox

Question

我有一个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);
}
}

Answer 1

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

-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不会处理"中心"或"50%"等相对值.

Answer 2

给出百分比而不是transform-origin: 0% 50%;中心顶部的位置..还有一件事。Firefox 中的 SVG 元素不支持transform-origin。有一些解决方法。链接：https ://bugzilla.mozilla.org/show_bug.cgi ?id=828286 在 SVG 组上设置变换原点在 FireFox 中不起作用 如何在 SVG 中设置变换原点希望它有所帮助