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

On May 18, 2011, at 9:40 AM, Brad Kemper wrote:

>> Even shorthand properties are CW.
>> The current angle setting for gradients however, is based on CCW rotation
> 
> That is the thing I dispute the most. The degrees in gradients do not indicate a rotation, they indicate a linear direction. No rotation is needed in order to understand the linear direction; you only need to understand what to map the degrees to, and what we have already is by far the most common mapping for translating degrees into a single linear direction.
> 
>> , which makes it inconsistent with other properties, and makes less sense to anyone that isn't a designer.
>> Even in graphics applications, rotation individually (as an action) is relative to a current position, and always works CW for positive angles.
> 
> For rotation object it is. For setting any kind of linear direction, it absolutely is not. If the current gradient angle is 90 in PhotoShop's gradient layer effect, and you change it to zero, you get a new direction (not 90 - 0, or 90 + 0).

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.

This requires that gradients follow the same rotation direction as transforms. Anything else will be really confusing to authors.

Simon

Received on Wednesday, 18 May 2011 16:50:53 UTC