- From: Lea Verou <leaverou@gmail.com>
- Date: Tue, 07 Feb 2012 01:16:38 +0200
- To: Aryeh Gregor <ayg@aryeh.name>
- CC: "L. David Baron" <dbaron@dbaron.org>, Dean Jackson <dino@apple.com>, "Tab Atkins Jr." <jackalmage@gmail.com>, www-style list <www-style@w3.org>
On 6/2/12 20:09, Aryeh Gregor wrote:
> On Mon, Feb 6, 2012 at 11:58 AM, Lea Verou<leaverou@gmail.com> wrote:
>> Yes, it is equivalent when we are talking about a static transform, but I'm
>> afraid it's not that easy in animations.
>> For example, how would you make an element move around in a circle without
>> wrapper elements and without multiple origins (and of course without
>> rotating the element itself)?
>
> data:text/html,<!doctype html>
> <style>
> @-moz-keyframes rotate {
> from {
> -moz-transform:translate(50px,50px) rotate(0deg)
> translate(-50px,-50px) rotate(0deg)
> }
> to {
> -moz-transform:translate(50px,50px) rotate(360deg)
> translate(-50px,-50px) rotate(-360deg)
> }
> }
> </style>
> <div style="background:lime;border:1px solid black;height:50px;width:50px;
> -moz-animation:rotate 2s linear infinite"></div>
>
> Works for me in Firefox 13.0a1, and in Chrome 18 dev if you change the
> -moz- to -webkit-.
Works for me too, nice one! Although I still think the easier syntax
that multiple origins would provide is needed.
--
Lea Verou (http://lea.verou.me | @LeaVerou)
Received on Monday, 6 February 2012 23:20:48 UTC