Re: [css3-images] Changing the angles in gradients

On May 18, 2011, at 10:05 PM, Alan Gresley <alan@css-class.com> wrote:

> On 19/05/2011 10:11 AM, Brad Kemper wrote:
>> On May 18, 2011, at 9:50 AM, Simon Fraser<smfr@me.com>  wrote:
>> 
>>> The following (which assumes that gradients get animated) should
>>> result in a box with a gradient whose angle remains the same
>>> relative to the page on hover:
>>> 
>>> div { transition: background-image 1s, transform 1s; transform:
>>> rotate(0deg); background-image: linear-gradient(0deg, black,
>>> white); }
>>> 
>>> div:hover { transform: rotate(90deg); background-image:
>>> linear-gradient(-90deg, black, white); }
>>> 
>>> Note that the the author intents the gradient to be anti-rotated as
>>> the box rotates.
>> 
>> I think that is an unreasonable expectation. Direction is often
>> different depending on how the value is used. You don't have to look
>> any further than to length values to prove it. Otherwise, your
>> hypothetical author might also expect the div to hold still in the
>> following example, because -50px should be always in the opposite
>> direction as 50px, no matter what property or componant value it is
>> in (which I think you would agree is preposterous):
> 
> 
> The example you gave only has a relation to two axises. They are X and Y and they are both linear. This does not relate to rotation which is measured in degrees.

 You missed the point. Degrees are a unit of measure, just like px. Px measure distance, and degrees measure arc of a circle. They can each be positive or negative, and they can each have an amount that indicates a different direction depending on what it is applied to. For degrees applied to rotate transforms, we've decided that they it means that positive numbers equals clockwise rotation. It can indicate a different sort of direction for linear-gradient without being inconsistent, just as it is not inconsistent for length measurements to indicate different directions. For linear-gradients, we needed something to indicate a linear direction more than we needed an indication of rotation. A ray does that, pointing out of the center of an imaginary circle, and standardized divisions on that circle give us reference points to communicate which way the ray is pointing. The degree markings if a grade-school protractor and the standard way of drawing angle diagrams in beginning geometry classes provide that common, easy to grasp reference. There is no inconsistency, because degrees are being used in a different way, to measure a different thing, just as lengths can be used in different ways to measure different things. 


> I would expect that one day I could create a static gradient as Simon has illustrated in his above example in a box that is rotating.

Just remove the negative sign. 

Received on Thursday, 19 May 2011 07:03:49 UTC