Last Comment Bug 704468 - Wrong rotation direction for rotate3d(x,y,z,angle)
: Wrong rotation direction for rotate3d(x,y,z,angle)
Status: VERIFIED FIXED
[qa!]
:
Product: Core
Classification: Components
Component: CSS Parsing and Computation (show other bugs)
: 10 Branch
: x86 Mac OS X
: -- normal (vote)
: mozilla11
Assigned To: Matt Woodrow (:mattwoodrow)
:
Mentors:
Depends on:
Blocks: 505115
  Show dependency treegraph
 
Reported: 2011-11-22 06:24 PST by Dirk
Modified: 2012-10-11 15:17 PDT (History)
9 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---
-
fixed
fixed


Attachments
HTML-demo (1.68 KB, text/html)
2011-11-22 06:24 PST, Dirk
no flags Details
-1 in vector vs rotatex/y/z (1.72 KB, text/html)
2011-11-23 02:44 PST, John P Baker
no flags Details
rotate3d and equivalent matrix3d css3d transform (2.38 KB, text/html)
2011-11-23 03:36 PST, Dirk
no flags Details
-1 in vector vs rotatex/y/z (1.94 KB, text/html)
2011-11-23 07:21 PST, John P Baker
no flags Details
Reverse the rotation direction (1.52 KB, patch)
2011-12-04 14:33 PST, Matt Woodrow (:mattwoodrow)
dbaron: review+
asa: approval‑mozilla‑aurora+
Details | Diff | Review

Description Dirk 2011-11-22 06:24:07 PST
Created attachment 576138 [details]
HTML-demo

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/534.51.22 (KHTML, like Gecko) Version/5.1.1 Safari/534.51.22

Steps to reproduce:

Apply CSS3 3d rotation (rotate3d(0,0,1,50deg) to element.


Actual results:

Element rotated counterclockwise around axis 


Expected results:

According to the spec it should have rotated *clockwise*. (See http://www.eleqtriq.com/wp-content/static/demos/2011/mozbugs/)
Comment 1 John P Baker 2011-11-23 01:01:42 PST
I am fairly sure that this is invalid. As I see it, vector (0,0,1) is coming out of
the screen so any rotation will be as 'seen' from behind the screen; The rotation
that you want would be (0,0,-1,50deg).
[cf (1,0,0) being left to right, and (0,1,0) being top to bottom]
Comment 2 Dirk 2011-11-23 02:01:25 PST
As I understand the spec the rotation vector is relative to the rotation origin of the elements local coordinate system. In the example the rotation occurs around a positive vector pointing towards the viewer, so a clockwise rotation should be a rotation from left to right IMHO. Another way to describe this rotation would be rotateZ(50deg), which works consistently in Fox and Webkit. The third way to describe this rotation would be to transfer vector and angle into a matrix. And again, applying a CSS3D transform with the resulting matrix, matrix3d(0.643,0.7663,0,0,-0.766,0.643,0,0,0,0,1,0,0,0,0,1) suddenly gives us the transformation we expected -clockwise around the Z-axis- consistently in Fox and Webkit.

However, even If your assumption would be true, this would mean that Webkit implementation has a bug. Unfortunately Webkit supports CSS3d for almost two years, which means every existing content will break in Fox10 causing new headaches for developers.  If this is the case, I as a developer would prefer the pragmatic solution that the spec is changed and Fox adopts the webkit way of handling rotations.
Comment 3 John P Baker 2011-11-23 02:44:49 PST
Created attachment 576434 [details]
-1 in vector vs rotatex/y/z
Comment 4 Dirk 2011-11-23 03:36:38 PST
Created attachment 576443 [details]
rotate3d and equivalent matrix3d css3d transform

According to the spec the axis angle combination is equivalent to this matrix3d transformation: matrix3d(1 + (1-cos(angle))*(x*x-1), -z*sin(angle)+(1-cos(angle))*x*y, y*sin(angle)+(1-cos(angle))*x*z, 0, z*sin(angle)+(1-cos(angle))*x*y, 1 + (1-cos(angle))*(y*y-1), -x*sin(angle)+(1-cos(angle))*y*z, 0, -y*sin(angle)+(1-cos(angle))*x*z, x*sin(angle)+(1-cos(angle))*y*z, 1 + (1-cos(angle))*(z*z-1), 0, 0, 0, 0, 1).

However, both transformations behave differently in aurora, one more indication that rotate3d is not implemented as expected.
Comment 5 Boris Zbarsky [:bz] 2011-11-23 06:43:05 PST
Matt, can you take a look please?
Comment 6 John P Baker 2011-11-23 07:21:20 PST
Created attachment 576494 [details]
-1 in vector vs rotatex/y/z

Added -webkit-transform styles
Comment 7 John P Baker 2011-11-23 07:42:52 PST
(In reply to Dirk from comment #2)
> ... And again, applying a CSS3D transform with
> the resulting matrix,
> matrix3d(0.643,0.7663,0,0,-0.766,0.643,0,0,0,0,1,0,0,0,0,1) suddenly gives
> us the transformation we expected -clockwise around the Z-axis- consistently
> in Fox and Webkit.

This is not the matrix you get when applying the algorithm from the spec

-z*sin(angle) gives -0.76626 so AFAICT we are following the standard but don't give
the same result as webkit.

[in attachment 576443 [details] computed styles are
 rotate3d: -moz-transform: matrix(0.642531, -0.76626, 0.76626, 0.642531, 0px, 0px);
 matrix3d: -moz-transform: matrix(0.643, 0.7663, -0.766, 0.643, 0px, 0px);]
Comment 8 Dirk 2011-11-24 01:36:24 PST
Your right! Well then -  hello again, inconsistencies and vendorprefix, my old friends :-/
Comment 9 Boris Zbarsky [:bz] 2011-11-24 10:50:16 PST
We do need to figure out whether the bug is in the spec or in WebKit...
Comment 10 Daniel Glazman (:glazou) 2011-11-25 05:36:44 PST
See http://lists.w3.org/Archives/Public/www-style/2011Nov/0653.html
Comment 11 David Baron :dbaron: ⌚️UTC-7 (review requests must explain patch) 2011-11-27 10:51:35 PST
(And to be clear why there's a tracking nomination:  we should figure this out before we ship 3d transforms.)
Comment 12 Matt Woodrow (:mattwoodrow) 2011-12-04 14:33:57 PST
Created attachment 578940 [details] [diff] [review]
Reverse the rotation direction

Looks like there is a consensus about this on www-style.

This patch reverse the rotation direction of rotate3d() with a note that it's still wrong in the spec.
Comment 13 David Baron :dbaron: ⌚️UTC-7 (review requests must explain patch) 2011-12-04 14:38:36 PST
Comment on attachment 578940 [details] [diff] [review]
Reverse the rotation direction

r=dbaron
Comment 14 Matt Woodrow (:mattwoodrow) 2011-12-04 14:55:37 PST
https://hg.mozilla.org/integration/mozilla-inbound/rev/a0e9e2640477
Comment 15 Matt Brubeck (:mbrubeck) 2011-12-05 10:31:40 PST
https://hg.mozilla.org/mozilla-central/rev/a0e9e2640477
Comment 16 David Baron :dbaron: ⌚️UTC-7 (review requests must explain patch) 2011-12-06 10:04:52 PST
Comment on attachment 578940 [details] [diff] [review]
Reverse the rotation direction

We shouldn't ship 3d transforms without this trivial fix, so requesting aurora approval.
Comment 17 David Baron :dbaron: ⌚️UTC-7 (review requests must explain patch) 2011-12-13 15:08:09 PST
https://hg.mozilla.org/releases/mozilla-aurora/rev/73f3cfb7ccce
Comment 18 Ioana (away) 2011-12-15 04:50:09 PST
Verified s fixed using the attached test cases on:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:10.0a2) Gecko/20111214 
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:11.0a1) Gecko/20111212

Note You need to log in before you can comment on or make changes to this bug.