8000 [css-transforms-1] Fix example 5 · w3c/csswg-drafts@6b34824 · GitHub
[go: up one dir, main page]
Skip to content

Commit 6b34824

Browse files
mclegrandmclegrand
committed
[css-transforms-1] Fix example 5
Fixes #5520 : Order of things happening in the example was reversed
1 parent 465794d commit 6b34824

File tree

3 files changed

+20
-19
lines changed

3 files changed

+20
-19
lines changed

‎css-transforms-1/Overview.bs‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -289,11 +289,11 @@ The 'transform-origin' property moves the point of origin by 50 pixels in both t
289289
}
290290
</code></pre>
291291

292-
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;.
292+
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 left direction.
293293

294-
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:
295-
1. The rotation matrix gets <a>post-multiplied</a> by the scale matrix.
296-
2. The result of the previous multiplication is then <a>post-multiplied</a> by the translation matrix to create the accumulated transformation matrix.
294+
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:
295+
1. The rotation matrix gets <a>pre-multiplied</a> by the scale matrix.
296+
2. The result of the previous multiplication is then <a>pre-multiplied</a> by the translation matrix to create the accumulated transformation matrix.
297297
3. Finally, the point to map gets <a>pre-multiplied</a> with the accumulated transformation matrix.
298298

299299
For more details see <a href="#transform-function-lists">The Transform Function Lists</a>.

‎css-transforms-1/examples/compound_transform.png‎

8.54 KB
Loading

‎css-transforms-1/examples/compound_transform.svg‎

Lines changed: 16 additions & 15 deletions
Loading

0 commit comments

Comments
 (0)
0