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.

Sign up for GitHub

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

Jump to bottom

[css-transforms-1] Example 5 is wrong : order is reversed #5520

Open
mclegrand opened this issue Sep 16, 2020 · 3 comments · May be fixed by #5702
Open

[css-transforms-1] Example 5 is wrong : order is reversed #5520

mclegrand opened this issue Sep 16, 2020 · 3 comments · May be fixed by #5702
Labels
css-transforms-1 Current Work

Comments

@mclegrand
Copy link
Member

The order of things in example 5 of https://github.com/w3c/csswg-drafts/blob/master/css-transforms-1/Overview.bs#L284 is wrong and contradicts both section 10 and example 2 (which are right), as explained by the following commented file :

(in red : what actually happens "if the div element gets translated by 80px to the bottom left direction, then scaled up by 150% and finally rotated by 45°."; in blue what happens if you just right-add transformations (in particular, you can't get from the translated object to the scaled+translated object with a origin-centered scaling, and you can't get from the translated+scaled one to the final one with a origin-centered rotation )); in green the "natural" mental transformations : take the original object, rotate the result, translate the result

<svg xmlns="http://www.w3.org/2000/svg">

<rect x="40" y="40" width="70" height="70" opacity="0.5"/> <!-- original element -->
<rect x="40" y="40" width="70" height="70" opacity="0.6" fill="green" transform="translate(80,80) scale(1.5) rotate(45)"/> <!-- resulting element -->


<!-- not the correct visual path to the result -->
<rect x="120" y="120" width="70" height="70" opacity="0.5" fill="red"/><!-- translated-->
<rect x="180" y="180" width="105" height="105" opacity="0.5" fill="red"/><!-- translated then scaled -->
<rect x="180" y="180" width="105" height="105" opacity="0.5" transform="rotate(45)" fill="red"/> <!-- translated then scaled then rotated (WRONG RESULT) -->



<!-- not the correct visual path to the result (because of multiplication order) -->
<g transform="translate(80,80)">
  <rect x="40" y="40" width="70" height="70" opacity="0.5" fill="blue"/>
  <g transform="scale(1.5)">
          <rect x="40" y="40" width="70" height="70" opacity="0.5" fill="blue"/> <!-- different from the "translated then scaled" -->
    <g transform="rotate(45)">
            <rect x="40" y="40" width="70" height="70" opacity="0.5" fill="blue"/> <!-- resulting element -->
    </g>
  </g>
</g>

<!-- correct visual/mental path to the result : rotated first (goes to the left of the image because it started on the diagonal), then scale it (stays to the left, lower), then move it diagonally -->
<g transform="rotate(45)">
  <rect x="40" y="40" width="70" height="70" opacity="0.5" fill="green"/>
</g>

<g transform="scale(1.5) rotate(45)">
  <rect x="40" y="40" width="70" height="70" opacity="0.5" fill="green"/>
</g>

</svg>

Hence,

  • the sentence "these transforms get multiplied in the reverse order:" is also wrong (by the way, it's contradicted by the "For more details see the transform function list" : The resulting transform is the matrix multiplication of the list of transforms. (section 10) --which is right--
  • the "post-multiplied" in 1 and 2 should be "pre-multiplied" (as we want trans×scale×rot×point : the example (and the identical hierarchy) is the same as in example 2 which tells to multiply translate, scale, and rot matrices in order )
  • the diagram is very misleading! In particular, if the result of the translation shown as done first is not centered on 0,0, then both the scaling and rotation should move the square away…
  • the identical nesting is right.
mclegrand added a commit to mclegrand/csswg-drafts that referenced this issue Nov 6, 2020
@mclegrand
[css-transforms-1] Fix example 5
6b34824 
Fixes w3c#5520 :
Order of things happening in the example was reversed
This was referenced Nov 6, 2020
Open
Open
mclegrand added a commit to mclegrand/csswg-drafts that referenced this issue Nov 6, 2020
@mclegrand
[css-transforms-1] Fix example 5
ebc8ff9 
Fixes w3c#5520 :
Order of things happening in the example was reversed
mclegrand added a commit to mclegrand/csswg-drafts that referenced this issue Nov 6, 2020
@mclegrand
[css-transforms-1] Fix example 5
f94f379 
Fixes w3c#5520 :
Order of things happening in the example was reversed
@fantasai fantasai added the css-transforms-1 Current Work label Jan 7, 2021
@maryamrmz
Copy link

And I think the <div> element gets translated by 80px to the bottom right direction, In the event that the direction considered to the bottom left.
Do you have an explanation for this?

@mclegrand
Copy link
Member Author

And I think the <div> element gets translated by 80px to the bottom right direction, In the event that the direction considered to the bottom left.
Do you have an explanation for this?

That has to be a minor typo/mistake, there is no way (80,80) can move on a bottom-left diagonal (it's gone in my PR (#5702) btw)

@svgeesus
Copy link
Contributor

svgeesus commented Apr 2, 2024

@dbaron @smfr @hober @grorg @dirkschulze

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css-transforms-1 Current Work
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[css-transforms-1] Fix 5520 mclegrand/csswg-drafts
4 participants
@fantasai @svgeesus @mclegrand @maryamrmz