- From: Aryeh Gregor <ayg@aryeh.name>
- Date: Mon, 6 Feb 2012 13:09:43 -0500
- To: Lea Verou <leaverou@gmail.com>
- 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 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-.
Received on Monday, 6 February 2012 18:10:33 UTC