- From: Alan Gresley <alan@css-class.com>
- Date: Thu, 19 May 2011 15:05:17 +1000
- To: Brad Kemper <brad.kemper@gmail.com>
- CC: Simon Fraser <smfr@me.com>, Mihai Potra <mike@mpotra.com>, "www-style@w3.org" <www-style@w3.org>
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. 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.
http://css-class.com/test/css/3/2d-animation/rolling-box-pi-with-inner-static-box.htm
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
Received on Thursday, 19 May 2011 05:05:46 UTC