Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-transforms] Error in description of transform in Section 3 example 5 #4767

Open
KenBallou opened this issue Feb 11, 2020 · 1 comment
Open

Comments

@KenBallou
Copy link

https://www.w3.org/TR/css-transforms-1/

In example 5 of section 3, the first paragraph under the CSS snippet reads "The visual appareance is as if the div element gets translated by 80px to the bottom left direction, then scaled up by 150% and finally rotated by 45°." In addition to the misspelling of "appearance", the

element gets translated by 80px to the bottom right direction. (The diagram underneath the text is correct.)

@afdw
Copy link
Contributor

afdw commented Oct 31, 2020

Moreover, this seems to be incorrect:

Each <transform-function> can get represented by a corresponding 4x4 matrix. To map a point from the coordinate space of the <div> box to the coordinate space of the parent element, these transforms get multiplied in the reverse order:

  1. The rotation matrix gets post-multiplied by the scale matrix.
  2. The result of the previous multiplication is then post-multiplied by the translation matrix to create the accumulated transformation matrix.
  3. Finally, the point to map gets pre-multiplied with the accumulated transformation matrix.

As far as I understand, it means that the resulting formula of the above procedure is:

pparent = Mrotation × Mscale× Mtranslation × plocal

But the rest of the specification and the Example 1 in particular seems to imply that the formula actually is:

pparent = Mtranslation × Mscale× Mrotation × plocal

Am I getting something wrong or is the example really incorrect?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants