W3C home > Mailing lists > Public > www-style@w3.org > June 2011

Re: [css-animation] transform origin rotation chaos (was an...)

From: Simon Fraser <smfr@me.com>
Date: Sun, 05 Jun 2011 08:54:57 -0700
Cc: www-style@w3.org
Message-id: <700667C1-9728-45C3-98A3-2E8CD47A3D95@me.com>
To: Alan Gresley <alan@css-class.com>

On Jun 5, 2011, at 7:57 am, Alan Gresley wrote:

> On 5/06/2011 12:02 AM, Alan Gresley wrote:
> 
>> Wanting to do a full 360 degree cycle and swapping transform origin in
>> the keyframes, I have now achieved this in WebKit (please view in WebKit
>> first).
>> 
>> http://css-class.com/test/css/3/2d-animation/box-turning-on-egde2.htm
> 
> 
> Aurora friendly now. Aurora needed margin: 0 0 0 0; in the first two keyframes (0% ~ 25%) and margin: 0 0 0 400px; in the last two keyframes (75.0001% ~ 100%) or it would try to animate to part of the other keyframes (25.0001% and 75%).
> 
> I thought that I could not go from transform-origin: bottom right to rotate from transform-origin: top right but this was since I didn't realize that I need to add both margin-left: 100px and margin-top: 100px to the second stage of the animation. Without margin-top: 100px, the transform-origin: top right appears visually at the top right even after a box has been rotated 90 degrees.
> 
> What I understand now is that there is some placeholder that will use the same margin (would also say offset) values. These are not rotated. Within this box is pseudo box that carries along the transform origin as the box is rotated. Something like this.
> 
> 
> tl-------tr bl-------tl br-------bl tr-------br +---------+
> |         | |         | |         | |         | |         |
> |         | |         | |         | |         | |         |
> |         | |         | |         | |         | |         |
> bl-------br br-------tr tr-------tl tl-------bl +---------+
> 
> 
> Below are the values that I used for the margins.
> 
> t: 0px      t: 100px   t: 100px      t: 0px
> r: 400px    r: 300px   r: 100px      r: 0px
> b: 0px      b:-100px   b:-100px      b: 0px
> l: 0px      l: 100px   l: 300px      l: 400px
> 
> 
> But depending on something which I do not quite follow, margin values can relate to an inverted box.
> 
> 
> tl---0---tr bl---?---tl br---?---bl tr---0---br +---------+
> |         | |         | |         | |         | |         |
> 0       400 100     300 100     300 0       400 |         |
> |         | |         | |         | |         | |         |
> bl---0---br br---?---tr tr---?---tl tl---0---bl +---------+
> 
> 
> Nothing in the spec makes this clear.
> 
> http://dev.w3.org/csswg/css3-2d-transforms/#transform-origin-property

Transform-origin is relative to the border box. Margins lie outside the border box.

Simon
Received on Sunday, 5 June 2011 16:56:19 GMT

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