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/