Re: Linear gradients, Transforms and angles...

On Sep 20, 2010, at 2:07 PM, Tab Atkins Jr. wrote:

> On Mon, Sep 20, 2010 at 2:01 PM, Chris Marrin <cmarrin@apple.com> wrote:
>> Angle is a concept that I believe is fairly new to CSS, so I don't think there is much of a precedent here. Using the math we are using in CSS transforms, rotation follows the "right hand rule". Hold your right hand so your fingers are curled and your thumb is pointing out. Your thumb indicates the direction vector of the axis of rotation and your fingers curl in the direction of rotation. Since the positve Z axis goes into the screen for CSS transforms, that means positive rotation angles go clockwise.
> 
> "In three dimensions, a Z axis is added, with 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."
> 
> The positive Z axis comes out of the window, not goes in.  By your
> logic, rotations should treat CCW as positive.

Yep, you're right! I was about to say that the spec is wrong, but it's not. Create a perspective transform and give a box a positive Z translation and it gets bigger. And now I see where my confusion was. SVG behaves this same way (except you can't do Z translations in SVG, of course). SVG and CSS follow the left-hand rule, not the right hand rule. This is because the Y axis goes from top to bottom, not bottom to top. So if you make a positive Y translation the object will move down. X is to the right, Y is down and Z is toward the viewer: the left hand rule for orientation. The corresponding left hand rule for rotation gives you a clockwise rotation with the Z axis toward the viewer. 

Sorry for confusing the issue. But at least the implementations (CSS & SVG, WebKit & Mozilla) seem to be consistent and in agreement.

-----
~Chris
cmarrin@apple.com

Received on Monday, 20 September 2010 22:13:31 UTC