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

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:14:10 UTC

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-.