diff --git a/css-transforms-1/Overview.bs b/css-transforms-1/Overview.bs index e33f372c233..4fc137f8b9c 100644 --- a/css-transforms-1/Overview.bs +++ b/css-transforms-1/Overview.bs @@ -289,11 +289,11 @@ The 'transform-origin' property moves the point of origin by 50 pixels in both t } -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°. +The visual appareance is as if the div element gets rotated by 45°, then scaled up by 150%, and finally translated by 80px to the bottom right direction. -Each <> 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. +Each <> 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: +1. The rotation matrix gets pre-multiplied by the scale matrix. +2. The result of the previous multiplication is then pre-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. For more details see The Transform Function Lists. diff --git a/css-transforms-1/examples/compound_transform.png b/css-transforms-1/examples/compound_transform.png index 178f30e07d0..2ed77d02d53 100644 Binary files a/css-transforms-1/examples/compound_transform.png and b/css-transforms-1/examples/compound_transform.png differ diff --git a/css-transforms-1/examples/compound_transform.svg b/css-transforms-1/examples/compound_transform.svg index 3973a84f0d9..4fa95cedb1a 100644 --- a/css-transforms-1/examples/compound_transform.svg +++ b/css-transforms-1/examples/compound_transform.svg @@ -1,4 +1,4 @@ -