Skip to content

clarify visual authoring order vs mathematical application for transform property#43496

Open
low-perry wants to merge 1 commit intomdn:mainfrom
low-perry:css-transform-property
Open

clarify visual authoring order vs mathematical application for transform property#43496
low-perry wants to merge 1 commit intomdn:mainfrom
low-perry:css-transform-property

Conversation

@low-perry
Copy link
Copy Markdown
Contributor

Description

This PR clarifies the relationship between the written order of transform functions (left-to-right) and their mathematical application (right-to-left). It emphasizes that each function modifies the local coordinate system for subsequent functions, which is why the visual result follows the authoring order

Motivation

The current wording in the Values section ("effectively applied in order from right to left") creates a mental mismatch for developers. While mathematically true for point-mapping , it contradicts the visual intuition described in the Transform order section, where a rotation "tilts" the axes for a following translation. These changes bridge that gap by explaining that functions establish cumulative coordinate spaces.

Additional details

This clarification is based on the CSS Transforms Module Level 1 and 2 specifications:

Related issues and pull requests

Fixes #43180

@low-perry low-perry requested a review from a team as a code owner March 19, 2026 15:53
@low-perry low-perry requested review from dipikabh and removed request for a team March 19, 2026 15:53
@github-actions github-actions bot added Content:CSS Cascading Style Sheets docs size/s [PR only] 6-50 LoC changed labels Mar 19, 2026
@github-actions
Copy link
Copy Markdown
Contributor

Preview URLs (1 page)

Flaws (9)

Found an unexpected or unresolvable flaw? Please report it here.

URL: /en-US/docs/Web/CSS/Reference/Properties/transform
Title: transform
Flaw count: 9

  • broken_links:
    • Link /en-US/docs/Web/CSS/Reference/Values/zero doesn't resolve
    • Link /en-US/docs/Web/CSS/Reference/Values/zero doesn't resolve
    • Link /en-US/docs/Web/CSS/Reference/Values/zero doesn't resolve
    • Link /en-US/docs/Web/CSS/Reference/Values/zero doesn't resolve
    • Link /en-US/docs/Web/CSS/Reference/Values/zero doesn't resolve
    • and 4 more flaws omitted

Copy link
Copy Markdown
Contributor

@mao-sz mao-sz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the practical reality (as far as a developer would be concerned in order to know how to read composite transforms) is left-to-right, then animation-composition will require amending accordingly.

I do not know if similar right-to-left descriptions exist in other pages.

@low-perry
Copy link
Copy Markdown
Contributor Author

@mao-sz I think you are 100% correct, but I'd love to keep this PR focused on the transform property as our 'source of truth' first, though.
Once we land this, we’ll have a clear standard to align the other pages as a follow-up

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Content:CSS Cascading Style Sheets docs size/s [PR only] 6-50 LoC changed

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Contradictory information about composite transforms in transform docs

3 participants