Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
[css-transforms-1] Fix example 5
Fixes #5520 :
Order of things happening in the example was reversed
  • Loading branch information
mclegrand committed Nov 6, 2020
commit f94f379bee1957b23891bb985014f9019320d944
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.