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

On 13/07/2014 1:47 AM, Tab Atkins Jr. wrote:
> On Fri, Jul 11, 2014 at 11:22 PM, Dirk Schulze <dschulze@adobe.com> wrote:
>> On Jul 11, 2014, at 8:42 PM, 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:

[snip]

>> 2) If you define more than one different transform function, do you post multiply or pre multiply?
>
> What do you mean?  I defined the ordering of properties in my
> proposal; is something missing?

I believe Dirk is referring to the following (see point 2) where it 
mentions post-multiply:

http://dev.w3.org/csswg/css-transforms/#serialization-of-the-computed-value

   | A <transform-list> for the computed value is
   | serialized to either one <matrix()> or one
   | <matrix3d()> function by the following algorithm:
   |
   | 1. Let transform be a 4x4 matrix initialized
   | to the identity matrix. The elements m11,
   | m22, m33 and m44 of transform must be set
   | to 1 all other elements of transform must
   | be set to 0.
   |
   | 2. Post-multiply all <transform-function>s
   | in <transform-list> to transform.
   |
   | 3. Chose between <matrix()> or <matrix3d()>
   | serialization:
   |
   | If transform is a 2D matrix
   |  Serialize transform to a <matrix()> function.
   | Otherwise
   |  Serialize transform to a <matrix3d()> function.


Alan


-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Sunday, 13 July 2014 12:37:56 UTC