Re: [css3-transforms] transform-origin syntax: 3D vs. background-position

On 27/02/2012 6:11 AM, Aryeh Gregor wrote:
> On Fri, Feb 24, 2012 at 11:36 PM, Alan Gresley<alan@css-class.com>  wrote:
>> 1. How it is possible to have transform-origin for a z-axis when the element
>> in question is 2 dimensional (only x and y axis) box.
>
> I'm not sure what you mean.

What I mean is that 'transform-origin' is relative to the transformed 
element with rotate* and skew* and not it's parent. This is seen in the 
below test case.

http://css-class.com/test/css/3/transforms/transform-origin1.htm

Also the transformed element only has two dimensions (it does not have 
width: <value>, height: <value> and depth: <value> for three dimensions).

> It works the same as translate3d() before
> and after the transform, just like for two dimensions.  E.g., if you
> want to rotate the box 180deg around a point 10px off the screen, you
> could do
>
>    transform: rotateY(180deg);
>    transform-origin: center center 10px;
>
> This is different from the default transform-origin in the case of
> perspective, or transform-style: preserve-3d.

I not sure exactly what you mean by 10px off this screen. Is this the 
z-axis of the transformed element or the z-axis of the transformed 
element's parent?

If this is different from the default, then I am presuming the later, 
thus it does not behave in the manner as if I had used translateZ(10px).

>> 2. The bug report has a test with rotate(). This is rotateZ() in 3D virtual
>> space. Why would you not use translateZ().
>
> The test was just to demonstrate that browsers don't currently
> implement the background-position syntax for transform-origin.
> rotate() was a convenient way to demonstrate that.

Agree. Only IE10 and Opera support background-position with extra values 
and only Webkit and Gecko support 3D transforms.

>> 3. The bug report shows that Dean has proposed transform-origin-z. How would
>> transform-origin-z and translateZ() behave differently.
>
> transform-origin: X Y Z is precisely identical to adding
> translate3d(-X, -Y, -Z) before the transform list and translate3d(X,
> Y, Z) after it.  It's just syntactic sugar, both in the 2D and 3D
> cases.

I do not understand what 'before the transform list' or 'after it' means 
and I do not know the difference between (-X, -Y, -Z) and (X, Y, Z) but 
one day I would like to know (I just have good spatial
awareness). Is it indicating two reference frames [1].

What I believe is wanted is a translation from the parent which is 
indicated by the lime line marker (z axis of parent) in this test case 
(best to view in Safari).

http://css-class.com/test/css/3/transforms/translate-transform-origin2.htm

If you hover the test, you will notice a transform that also has 
rotateZ(90deg) and translateZ(50px). Notice how this keep the 
intersection of the X and Y axis (the point of transform-origin) 
relative to the red line marker (z axis of transformed element).


1. 
http://en.wikipedia.org/wiki/Rotating_reference_frame#Relation_between_positions_in_the_two_frames



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

Received on Tuesday, 28 February 2012 02:58:35 UTC