W3C home > Mailing lists > Public > www-style@w3.org > May 2011

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

From: Brad Kemper <brad.kemper@gmail.com>
Date: Wed, 18 May 2011 17:11:46 -0700
Message-Id: <5C30CB58-A52F-4CB0-BC65-F130A01310D0@gmail.com>
Cc: Mihai Potra <mike@mpotra.com>, "www-style@w3.org" <www-style@w3.org>
To: Simon Fraser <smfr@me.com>
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 />
Received on Thursday, 19 May 2011 00:12:25 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:40 GMT