CSS转换起源不适用于firefox

时间:2014-08-16 12:55:17

标签: html css firefox transform scale

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

4 个答案:

答案 0 :(得分:12)

在带有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%”等相对值。

答案 1 :(得分: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希望有所帮助

答案 2 :(得分:3)

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

答案 3 :(得分:0)

转换源始终是某些浏览器的兼容性问题。当您使用中心,上,下,左,右等关键字时也是如此。

尝试以像素为单位提供所有值。所有浏览器都能完美理解像素。如果你是从随机原点动画对象,那么你可以去一个设计环境,找到原点所在的确切像素,并使用相同的精确值进行编码,以便精确并始终与所有浏览器兼容:)