转换：在 Firefox 中旋转需要与 webkit 不同的值？答案

【问题标题】：transform: rotate in firefox needs different value than webkit?转换：在 Firefox 中旋转需要与 webkit 不同的值？
【发布时间】：2014-07-25 18:58:05
【问题描述】：

我有一个旋转 -45 度的 SVG，它在 Chrome 和 Safari 中看起来是我想要的方式，但是当我在 Firefox 中查看它时，SVG 没有正确旋转 - 我必须将值设置为 -90 度让它看起来一样。我尝试过使用和不使用供应商前缀。这是它所在的网站示例（有问题的 svg 是伞）：http://agentem.github.io/CoverMe/

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

【问题讨论】：

Firefox 中的行为应该与 Chrome 中的相同。我已经在不同的 Firefox 版本中打开了您的网站，并且它按预期工作，因此问题可能与浏览器无关。
在 Firefox 和 Chrome 中看起来不错
无法重现此问题，旋转 -45deg 看起来相同

标签： css firefox svg

【解决方案1】：

我遇到了同样的问题。我最终通过这样做来解决它：

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

-moz-transform 属性只有 Firefox 才能理解。

现代 Firefox 可以理解常规的 transform，所以 -moz-transform 需要排在第二位。

【讨论】：

【解决方案2】：

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

创建 Rotate css3 代码

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

【讨论】：