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] Fix mistakes in Example 5 (closes #4767) #5690

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[css-transforms-1] Fix mistakes in Example 5 (closes #4767) #5690

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
8 changes: 4 additions & 4 deletions css-transforms-1/Overview.bs
View file
Open in desktop
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 appearance is as if the <a element>div</a> element gets translated by 80px to the right direction and by 80px to the bottom direction, then scaled up by 150% and finally rotated by 45&deg;.

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 in the declared order:
1. The translation 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 rotation 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