CODEWITHSUNDEEP
cssfirefoxsvg
agentem
agentem

Reputation: 811

transform: rotate in firefox needs different value than webkit?

I have an SVG that's rotated -45deg, which looks the way I want it to in Chrome and Safari, but when I look at it in Firefox the SVG isn't rotated correctly - I have to set the value to -90deg for it to look the same. I've tried with and without vendor prefixes. Here's the site it's on for an example (svg in question is the umbrella): http://agentem.github.io/CoverMe/

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

Upvotes: 3

Views: 4076

Answers (2)

Daniel Tonon
Daniel Tonon

Reputation: 10412

I ran into this exact same issue. I ended up working around it by doing this:

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

The -moz-transform property will only be understood by Firefox.

Modern Firefox can understand regular transform so -moz-transform needs to come second.

Upvotes: 2

Amir akbari
Amir akbari

Reputation: 62

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)

For example rotate 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%;

For example see

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

Create Rotate css3 code with

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

Upvotes: 0

Related Questions