Re: Linear gradients, Transforms and angles...

On Sep 20, 2010, at 1:22 PM, Brad Kemper wrote:

> On Sep 20, 2010, at 12:09 PM, Simon Fraser <smfr@me.com> wrote:
> 
>> The endpoint-based form of linear gradients default to top-to-bottom, if I recall (the default starting point is 'top').
> 
> That is pretty arbitrary, though, and could be changed as easily as anything else in the proposal, if needed. 
> 
>> It seems somewhat counter-intuitive to have an angle gradient with an angle of zero go left-to-right.
> 
> I completely disagree with that statement. I find it counter-intuitive to have anything but left-to-right for zero degrees, and bottom-to-top for ninety degrees. That's really my point, in fact. But you probably realize that and are only referring to a desire for zero to match a default direction.  
> 
>> Unfortunately, with 0° pointing up, you get a bottom-to-top gradient. 
> 
>> I realize that we don't necessarily have default behavior for angle gradients,
> 
> I believe the default was chosen because vertical gradients are a little mire common than horizontal ones on the Web. If it was more important for zero=default, then the default should be changed to left-to-right, not the other way around. On the other hand, if we only have angles for gradients (which you'll see more about from me soon), then no default is needed. 
> 
>> but I still think the horizontal vs vertical mismatch messes with author expectations.
> 
> This author's expectations are that 90deg should be upward for a linear direction specified in degrees. All my prior experience in life before learning how programmers think reinforce that expectation. 

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.

	-webkit-transform: rotate(10deg)

results in a clockwise rotation of the element to which it is applied. This is true in both WebKit and Firefox, and it's how analog clocks work, so it makes sense.

Where rotations "start" is a matter of convention. Analog clocks start at 12 o'clock (bottom to top), In geometry, a 0 degree rotation is typically represented by a vector along the positive X axis. But again, that's all convention.

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

Received on Monday, 20 September 2010 21:02:18 UTC