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: Rik Cabanier <cabanier@gmail.com>
Date: Tue, 7 Feb 2012 16:35:00 -0800
Message-ID: <CAGN7qDBSKaQjJh9y3cLqZhXd-28qTH363A=hSnf0L=bjfaZNjQ@mail.gmail.com>
To: Lea Verou <leaverou@gmail.com>
Cc: Aryeh Gregor <ayg@aryeh.name>, "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 3:16 PM, Lea Verou <leaverou@gmail.com> wrote:

> 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.
>
>
How common is that case?
It seems easier to split the animation.

Rik
Received on Wednesday, 8 February 2012 00:39:13 GMT

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