Skip to content

Commit

Permalink
[css-transforms-1] Fix example 5
Browse files Browse the repository at this point in the history
Fixes w3c#5520 :
Order of things happening in the example was reversed
  • Loading branch information
mclegrand committed Nov 6, 2020
1 parent dae24bb commit f94f379
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 19 deletions.
8 changes: 4 additions & 4 deletions css-transforms-1/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -289,11 +289,11 @@ The 'transform-origin' property moves the point of origin by 50 pixels in both t
}
</code></pre>

The visual appareance is as if the <a element>div</a> element gets translated by 80px to the bottom left direction, then scaled up by 150% and finally rotated by 45&deg;.
The visual appareance is as if the <a element>div</a> element gets rotated by 45&deg;, then scaled up by 150%, and finally translated by 80px to the bottom right direction.

Each <<transform-function>> can get represented by a corresponding 4x4 matrix. To map a point from the coordinate space of the <a element>div</a> box to the coordinate space of the parent element, these transforms get multiplied in the reverse order:
1. The rotation matrix gets <a>post-multiplied</a> by the scale matrix.
2. The result of the previous multiplication is then <a>post-multiplied</a> by the translation matrix to create the accumulated transformation matrix.
Each <<transform-function>> can get represented by a corresponding 4x4 matrix. To map a point from the coordinate space of the <a element>div</a> box to the coordinate space of the parent element, these transforms get multiplied:
1. The rotation matrix gets <a>pre-multiplied</a> by the scale matrix.
2. The result of the previous multiplication is then <a>pre-multiplied</a> by the translation matrix to create the accumulated transformation matrix.
3. Finally, the point to map gets <a>pre-multiplied</a> with the accumulated transformation matrix.

For more details see <a href="#transform-function-lists">The Transform Function Lists</a>.
Expand Down
Binary file modified css-transforms-1/examples/compound_transform.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 changes: 16 additions & 15 deletions css-transforms-1/examples/compound_transform.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit f94f379

Please sign in to comment.