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

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

From: Alan Gresley <alan@css-class.com>
Date: Mon, 06 Jun 2011 00:57:10 +1000
Message-ID: <4DEB9946.7080000@css-class.com>
To: www-style@w3.org
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


Any ideas?





-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/
Received on Sunday, 5 June 2011 14:57:40 GMT

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