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

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

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

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

Received on Sunday, 26 February 2012 19:12:31 UTC