W3C home > Mailing lists > Public > www-style@w3.org > November 2011

[css3-3d-transforms] rotations, changes needed...

From: Daniel Glazman <daniel.glazman@disruptive-innovations.com>
Date: Fri, 25 Nov 2011 14:33:03 +0100
Message-ID: <4ECF990F.7020105@disruptive-innovations.com>
To: "www-style@w3.org" <www-style@w3.org>

Spec says "positive z values conceptually rising perpendicularly out of
the window toward the user and negative z values falling into the
window away from the user"

Spec also says in [1]:

   rotate(d) specifies a 2D rotation defined in [2].
      On screen    : clockwise
      Around Z axis: counter-clockwise


   rotate3D(0, 0, 1, d) specifies a clockwise rotation around the Z
     axis
      Around Z axis: clockwise
      On screen    : counter-clockwise

   rotateZ(d) specifies a clockwise rotation around the Z axis
      Around Z axis: clockwise
      On screen    : counter-clockwise

So according to the spec:

   rotate(10deg)
   rotate3d(0, 0, -1, 10deg)
   rotate3d(0, 0, 1, -10deg)
   rotateZ(-10deg)

should ***all*** represent the same 2D rotation on screen.
This is far from being the case. See

   http://glazman.org/tmp/rotation3D_test.xhtml

Effects of a transformation ON SCREEN with same value d:
(  http://glazman.org/tmp/rotation3D_test2.xhtml )
OK and NOK are wrt spec.

                     Firefox 11.0a1   Chrome 15    IE 10.0.8102.0/Win8
-------------------+---------------+-------------+-------------------
rotate(d)          |ckw   OK       | ckw   OK    |ckw  OK
rotate3d(0,0,1,d)  |c-ckw OK       | ckw   NOK   |ckw  NOK
rotate3d(0,0,-1,-d)|c-ckw OK       | ckw   NOK   |ckw  NOK
rotateZ(d)         |ckw   NOK      | ckw   NOK   |ckw  NOK

So none of the implementation is correct at this time.
rotate3d(0,0,1,d) and rotateZ(d) should be the same; so Firefox is
wrong here on rotateZ or rotate3d(). Although Chrome and IE agree,
they don't agree with the spec.

So my proposal is

1. Firefox changes its implementation

2. spec is changed to make rotate3d() and rotateX(), rotateY, rotateZ()
    be COUNTER-clockwise rotations around the specified axis.

[1] 
http://dev.w3.org/csswg/css3-3d-transforms/Overview.html#transform-functions

[2] http://www.w3.org/TR/SVG/coords.html#RotationDefined

</Daniel>
Received on Friday, 25 November 2011 13:33:35 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:46 GMT