W3C home > Mailing lists > Public > www-style@w3.org > February 2012

Re: [css3-transforms] Making transform-origin a list, converting transform to comma separated

From: Aryeh Gregor <ayg@aryeh.name>
Date: Mon, 6 Feb 2012 13:09:43 -0500
Message-ID: <CAKA+Ax=MW5FLw8V=hH-a_O9HWsXd+E092iARCqHEEQkMu-nBrg@mail.gmail.com>
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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:50 GMT