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

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): 

<style> 
div { 
transition: top 1s, margin-left 1s; 
position:relative; 
margin-left:0; 
top:0; 
} 
div:hover { 
margin-left:50px; 
top:-50px;
 }
 </style> 
<div />