Re: [css-animation] transform origin rotation chaos (was an...)

On 4/06/2011 12:56 AM, Boris Zbarsky wrote:
> On 6/3/11 10:33 AM, Alan Gresley wrote:
>> I would actually like it to work without any clicks. I am presuming from
>> much experimentation that currently this type of animation impossible.
>
> See attachment. Hacky, but pretty doable. There might be a cleaner way
> for this particular effect, but I didn't think too much about this.
>
> -Boris


Thank you Boris. Must remember that nothing is impossible.

http://css-class.com/test/css/3/2d-animation/box-turning-on-egde.htm


I have added to your CSS (4 turns forward) to also go 4 turns backwards. 
Visually the box appears to continue to turn beyond 90 degrees but that 
is since nothing (borders or background) is indicating that the full 
cycle is faked.

Wanting to do a full 360 degree cycle and swapping transform origin in 
the keyframes, I have now achieved this in WebKit (please view in WebKit 
first).

http://css-class.com/test/css/3/2d-animation/box-turning-on-egde2.htm


I have allowed the div to expand in height to help understand what is 
happening. Now please view the same test (with identical CSS) in Aurora.

At this point, I have no idea what Aurora is doing. I will play with the 
CSS tomorrow to make it Aurora friendly.  I think the initial trouble I 
had when first doing it in WebKit was that I didn't understand where it 
was placing the point of transform origin. The lengths in the CSS seems 
to indicate that for WebKit, the point of transform origin is based on 
the margin, width and height of the box.

The other issues like chained events (mentioned previous) is pointless 
to discuss when the point of transform origin is not well defined.

Need to rest now.


-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Saturday, 4 June 2011 14:03:22 UTC