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

On Mon, Feb 27, 2012 at 9:57 PM, Alan Gresley <alan@css-class.com> wrote:
> 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).

All of that is true.  I don't understand how it's relevant to your
question, though.

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

transform-origin is always specified relative to the top left corner
of the current element's border box, before any transformations are
considered.

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

It does behave exactly the same.

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

All I'm saying is that, for instance,

  transform: rotateX(75deg) scale3d(1.2, 0.6, 7);
  transform-origin: 25% 75% -20px;

is exactly the same as

  transform: translate3d(-25%, -75%, 20px) rotateX(75deg) scale3d(1.2,
0.6, 7) translate3d(25%, 75%, -20px);
  transform-origin: top left;

and similarly for any usage of transform-origin.  transform-origin
isn't actually necessary itself -- you can always use translate*()
instead.  It just makes things easier to think about.

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

I don't have access to Safari, and I'm afraid I don't understand your test case.

Received on Thursday, 1 March 2012 18:55:34 UTC