Re: [css-transforms] Making 'transform' match author expectations better with specialized 'rotate'/etc shorthands

On Fri, Jul 11, 2014 at 11:42 AM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
> Earlier today I saw a Twitter thread started by Lea
> <https://twitter.com/LeaVerou/status/487350702386479105> about how she
> commonly accidentally types the name of the transform she wants as the
> property (like "rotate: 45deg;") and then has to go back and correct
> it afterwards.  Several other devs chimed in that they do this as
> well, and I know that I've done it a few times (especially when using
> SVG - I use "transform='translate(...)'" so often that I commonly try
> to name the attribute "translate" first).
>
> Since this is something that devs trip over so much, it might be worth
> accommodating it in the syntax.  I think we can do this compatibly
> with the current syntax.  Here's a proposal:

And, to hopefully make the details of the proposal clearer, here is
the full proposal for new properties, with shorthands all explicitly
defined as well.

Core Properties:

* perspective: none | <length>
* translateX: none | <length>
* translateY: none | <length>
* translateZ: none | <length>
* rotateX: none | <angle>
* rotateY: none | <angle>
* rotateZ: none | <angle>
* rotate3d: none | <number> <number> <number> <angle>
* scaleX: none | <number>
* scaleY: none | <number>
* scaleZ: none | <number>
* skewX: none | <angle>
* skewY: none | <angle>
* skew: none | <angle> <angle>?
* transform-list: none | <transform-function>+

Shorthand properties:

* translate3d: none | <length> <length> <length>
  - expands to translateX, translateY, and translateZ
* translate: none | <length> <length>
  - expands to translateX and translateY, setting translateZ to "none"
* rotate: none | <angle>
  - expands to rotateZ
* scale3d: none | <number> <number> <number>
  - expands to scaleX, scaleY, and scaleZ
* scale: none | <number> <number>?
  - expands to scaleX and scaleY (setting both to the first number if
the second is omitted), setting scaleZ to 1
* transform: none | <transform-function>+
  - expands to transform-list, setting all of the other core
properties to "none" (except 'perspective', which is untouched)

The core properties are applied in the order they're listed. In other
words, the final transform is as if the author wrote the following
long 'transform' value (using the appropriate functions, and identity
values in the case of "none"):

transform: <perspective> <translateX> <translateY> <translateZ>
<rotateX> <rotateY> <rotateZ> <rotate3d> <scaleX> <scaleY> <skaleZ>
<skewX> <skewY> <skew> <transform-list>;

It looks like the skew() function is just for legacy content; should
we maintain it as a transform property, or is it an attractive
nuisance that should be omitted?

~TJ

Received on Sunday, 13 July 2014 03:14:28 UTC