Re: [css3-2d-transforms] transform-origin

On 26/01/2011 6:45 PM, Andrew Fedoniouk wrote:
> It is stated here:
> http://www.w3.org/TR/css3-2d-transforms/#transform-origin-property
> that transform-origin "refer to the size of the element's box".


The size only relates when a percentage value is used.


> It is not clear which box: inner, padding, border... is mentioned there.


Not sure.


> My experiments show that it should be border box so if someone
> will want to rotate element around its left/bottom visual corner then it
> will be a matter


Rotation is limited to a central point of a plane. It is indicated by 
the letter 'c' is the below diagram.


+ ---- y ---- +
|      ¦      |
|      ¦      |
x ---- c ---- x
|      ¦      |
|      ¦      |
+ ---- y ---- +



> of defining transform-origin: left bottom;
> In any case inner box there is almost useless.


This is of great importance if the nested element width or height is 
smaller than it's parent. If there is perspective, the right edge of the 
parent element could be 10,000s of pixels outside the viewport

It's somewhat like using background: position and background-repeat: 
no-repeat for a background-image that is smaller than the padding-box of 
the element it's belong to.


-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo

Received on Wednesday, 26 January 2011 09:44:21 UTC