transform：在firefox中旋轉需要與webkit不同的值嗎？

我有一個旋轉-45度的SVG，看起來我希望在Chrome和Safari中使用它，但是當我在Firefox中查看它時，SVG不能正確旋轉 - 我必須將該值設置爲-90度它看起來一樣。我嘗試過使用和不使用供應商前綴。下面是它的一個例子網站（SVG問題是傘）：http://agentem.github.io/CoverMe/transform：在firefox中旋轉需要與webkit不同的值嗎？

svg { 
    transform:rotate(-45deg); 
    margin-left: 3%; 
    fill:#FFF; 
}

來源

2014-06-04 agentem

Firefox中的行爲應該與Chrome中的行爲相同。我已經在不同的Firefox版本中打開了您的網站，並且它按預期工作，所以這個問題可能與瀏覽器無關。 –

在Firefox和Chrome中對我來說看起來不錯 – Ian

無法重現此問題或旋轉-45deg看起來相同 –

transform: none 
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0) 
transform: translate(12px, 50%) 
transform: translateX(2em) 
transform: translateY(3in) 
transform: scale(2, 0.5) 
transform: scaleX(2) 
transform: scaleY(0.5) 
transform: rotate(0.5turn) 
transform: skewX(30deg) 
transform: skewY(1.07rad) 
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0) 
transform: translate3d(12px, 50%, 3em) 
transform: translateZ(2px) 
transform: scale3d(2.5, 1.2, 0.3) 
transform: scaleZ(0.3) 
transform: rotate3d(1, 2.0, 3.0, 10deg) 
transform: rotateX(10deg) 
transform: rotateY(10deg) 
transform: rotateZ(10deg) 
transform: perspective(17px) 

transform: translateX(10px) rotate(10deg) translateY(5px)

例如旋轉30度：

-webkit-transform: translate(100px) rotate(20deg); 
    -webkit-transform-origin: 60% 100%; 

    -o-transform:translate(100px) rotate(20deg); 
    -o-transform-origin:60% 100%; 

    transform: translate(100px) rotate(20deg); 
    transform-origin: 60% 100%;

例如看到

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

創建旋轉css3代碼與

http://www.css3maker.com/css3-transform.html

來源

2014-06-13 12:58:47

我遇到了這個完全相同的問題。我最終這樣做了：

transform: rotate(-45deg); 
-moz-transform: rotate(-90deg);

-moz-transform屬性只能被Firefox理解。

現代的火狐可以理解經常的transform，所以-moz-transform需要排在第二位。

來源

2017-09-22 00:35:55

transform：在firefox中旋轉需要與webkit不同的值嗎？

回答

相關問題