W3C home > Mailing lists > Public > public-fx@w3.org > January to March 2012

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

From: Alan Gresley <alan@css-class.com>
Date: Tue, 28 Feb 2012 13:57:59 +1100
Message-ID: <4F4C42B7.6060802@css-class.com>
To: Aryeh Gregor <ayg@aryeh.name>
CC: public-fx@w3.org
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.


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


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


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

This archive was generated by hypermail 2.3.1 : Monday, 22 June 2015 03:33:46 UTC