Transform Function Order Matters Note
Compare geometric translate-then-rotate vs rotate-then-translate about origin, input radians and common units; CSS transform-list composition acts rightmost first. Explicit supplied computed/layout context only; not a browser cascade/layout engine or cross-browser guarantee.
Description
Rotation and translation generally do not commute.
Rotation and translation generally do not commute.1
Comparing both mathematical sequences explains why changing transform order can change the final position. Use Transform Function Order Matters Note to evaluate the supplied inputs under the specific model below.
When to use Transform Function Order Matters Note
Use Transform Function Order Matters Note to evaluate the supplied inputs under the specific model below. Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.
How to use Transform Function Order Matters Note and understand its results
- Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.
- Enter Point x, Point y, Translate x, Translate y, Rotation radians using the field table and validation rules below, then run the tool.
- Read Translate then rotate point, Rotate then translate point and interpret units, signs, ordering and placeholders as explained below.
- If the tool reports an input error, correct that field and rerun. A successful false result, empty match list or unknown-evidence placeholder has the specific meaning described here; check the limitations before applying the result.
| Input field | Meaning | Value type | Requirement |
|---|---|---|---|
| pointX | Point x | number | Required; constraints below |
| pointY | Point y | number | Required; constraints below |
| translateX | Translate x | number | Required; constraints below |
| translateY | Translate y | number | Required; constraints below |
| rotationRadians | Rotation radians | number | Required; constraints below |
Enter a finite planar point, translation and angle in radians. Compute both rotation of the translated point and translation of the rotated point with the ordinary 2D rotation matrix. These two outputs demonstrate noncommuting operations; map the mathematical operation order to the transform-list convention independently.
rotateAfterTranslate = R(θ)×(point+translation); translateAfterRotate = R(θ)×point+translation Field order, units and branch conditions follow the implementation explanation above.
| Output field | Meaning | Value type |
|---|---|---|
| translateThenRotatePoint | Translate then rotate point | array of number |
| rotateThenTranslatePoint | Rotate then translate point | array of number |
{
"input": {
"pointX": 1,
"pointY": 0,
"translateX": 10,
"translateY": 0,
"rotationRadians": 1.5707963267948966
},
"output": {
"translateThenRotatePoint": [
6.735557395310443e-16,
11
],
"rotateThenTranslatePoint": [
10,
1
]
}
}Limitations and assumptions
Comparing both mathematical sequences explains why changing transform order can change the final position. Apply the exact scope and assumptions described above.
All listed fields require explicit values. Unexpected fields, incorrect types, nonfinite numbers and sparse arrays fail validation. Domain-specific bounds, alignments and supported tokens are stated above; extremely large inputs or outputs can also be rejected. These errors differ from successful results such as false, no matches or unknown evidence.
Alternative or Complementary methods
Use aspect-ratio Property vs Padding-Hack Note for a related task: Aspect-ratio sizing and percentage-padding techniques can use different width bases.
Use Rotate Origin Offset Effect Note for a related task: Rotation about an offset origin first expresses the point relative to that origin.
References
-
Transform Function Order Matters Note — tool.io
Similar or alternative tools
- aspect-ratio Property vs Padding-Hack Note
Aspect-ratio sizing and percentage-padding techniques can use different width bases.
- Rotate Origin Offset Effect Note
Rotation about an offset origin first expresses the point relative to that origin.