CODEWITHSUNDEEP
firefoxcsscss-transforms
fuzic
fuzic

Reputation: 2522

Firefox cannot rotate3d around axis in quadrants 2 and 4 on the cartesian plane

I've been experiencing some odd behavior with Firefox CSS3 transforms.

My issue is illustrated in this JSfiddle: http://jsfiddle.net/R4j6G/2/

Basically, the rotate3d transform function takes a rotation axis as the first three args and an angle as the last. Dealing only with the XY plane (I haven't tested this in the Z dimension) it seems firefox only rotates as expected when the x & y coordinates are either both positive or both negative.

Works:

-moz-transform: rotate3d(1, 1, 0, 180deg);

Doesn't work (shows up the same as ^):

-moz-transform: rotate3d(1, -1, 0, 180deg);

I can't seem to decipher what might be causing this, or if there are any work-arounds to get rotation about an axis in quadrants II or IV to work.

Upvotes: 2

Views: 826

Answers (1)

fuzic
fuzic

Reputation: 2522

Okay, as I somewhat expected this is a bug in Firefox.

https://bugzilla.mozilla.org/show_bug.cgi?id=781701

The issue persists whether using rotate3d or matrix3d, so long as the rotation angle is 180 degrees and the rotation axis is in quadrants 2 or 4.

This is circumvented by using any other rotation angle than 180 degrees (I'm now using 179 degrees).

Upvotes: 2

Related Questions