Re: [css3-transforms] Making transform-origin a list, converting transform to comma separated

On Fri, Feb 3, 2012 at 7:09 PM, Lea Verou <leaverou@gmail.com> wrote:
> While I'm at it, it would be great if transform-origin was also a comma
> separated list, being potentially able to accept different origins for every
> transform. As it currently stands, the only way to do that is wrapper
> elements. It's very useful, for example to make an element move in a
> circular path while not being rotated itself (two rotate transforms with
> different origins and opposite angles).

transform-origin is just syntactic sugar.  You should always be able
to use translate() instead.

On Sat, Feb 4, 2012 at 7:07 PM, Lea Verou <leaverou@gmail.com> wrote:
> Please keep animations in mind. This is where origin is most useful in. In
> static transforms, everything can be emulated by an extra translate()
> anyway.

I'm not seeing how you can't use translate() just as well for
animations.  E.g., if you wanted the effect of

from {
  transform: rotateX(45deg), rotateY(45deg), rotateZ(45deg);
  transform-origin: top, left, center;
}
to {
  transform: rotateX(-45deg), rotateY(-45deg), rotateZ(-45deg);
  transform-origin: bottom, right, center;
}

what's wrong with

from {
  transform: translate(50%, 0%) rotateX(45deg) translateX(50%, 0%)
    translate(0%, 50%) rotateY(45deg) translate(0%, -50%)
    translate(50%, 50%) rotateZ(45deg) translate(-50%, -50%);
  transform-origin: top left;
}
to {
  transform: translate(50%, 100%) rotateX(-45deg) translate(-50%, -100%)
    translate(100%, 50%) rotateY(-45deg) translate(-100%, -50%)
    translate(50%, 50%) rotateZ(-45deg) translate(-50%, -50%);
  transform-origin: top left;
}

Would this not have the desired effect?  Could you give an example
where you can't get the same effect with translate()?

I grant this looks much messier, but it's important to figure out if
you're asking for new features or just new syntax for something that
can already be done.

Received on Monday, 6 February 2012 16:30:39 UTC