- From: Alan Gresley <alan@css-class.com>
- Date: Mon, 06 Jun 2011 00:57:10 +1000
- 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 UTC