Question

我有一个旋转-45deg的SVG，它在Chrome和Safari中看起来像我想要的那样，但是当我在Firefox中查看它时，SVG没有正确旋转 - 我必须将值设置为-90deg，使其看起来相同。我曾尝试使用和不使用供应商前缀。这是一个例子的网站（有问题的svg就是保护伞）：http://agentem.github.io/CoverMe/

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

Answer 1

我遇到了同样的问题。我最终解决了这个问题：

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

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

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

Answer 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)

例如，旋转30deg：

-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

转换：在firefox中旋转需要与webkit不同的值？

2 个答案: