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

On 6/06/2011 1:54 AM, Simon Fraser wrote:

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


I understand that Simon. Please view this in Safari.

Example 1:

<!doctype html>
<style>
body {
   height: 400px;
   border-left: 10px solid orange;
}
div {
   position: absolute;
   width: 90px;
   height: 90px;
   border: 5px solid blue;
}
#element1 {
   margin-top: 0px;
}
#element2 {
   margin-top: 100px;
}
#element3 {
   margin-top: 200px;
}
#element4 {
   margin-top: 300px;
}
</style>
<div id="element1">1</div>
<div id="element2">2</div>
<div id="element3">3</div>
<div id="element4">4</div>


Now I want to make an animation where those boxes run downwards along 
the border-left edge of the viewport. To know where to begin each 
section of the animation, I initially start with four boxes.

Example 2:

<!doctype html>
<style>
body {
   height: 400px;
   border-left: 10px solid orange;
}
div {
   position: absolute;
   width: 90px;
   height: 90px;
   border: 5px solid blue;
}
#element1 {
   -webkit-transform: rotate(0deg);
   -webkit-transform-origin: bottom left;
}
#element2 {
   -webkit-transform: rotate(90deg);
   -webkit-transform-origin: bottom right;
}
#element3 {
   -webkit-transform: rotate(180deg);
   -webkit-transform-origin: top right;
}
#element4 {
   -webkit-transform: rotate(270deg);
   -webkit-transform-origin: top left;
}
</style>
<div id="element1">1</div>
<div id="element2">2</div>
<div id="element3">3</div>
<div id="element4">4</div>


To make the above boxes (Example 2) to appear visually in the same 
positions as in Example 1, what margins do I give to element2, element3 
and element4?



-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Monday, 6 June 2011 05:27:46 UTC