MDN URL
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transform
What specific section or headline is this issue about?
Values and Transform order
What information was incorrect, unhelpful, or incomplete?
In the docs for transform, under Values, it says that composite transforms are effectively applied in order from right to left. I interpret this to mean that transform: translateX(200px) rotate(135deg); effectively rotates first by 135deg then translates along the X axis by 200px.
If this is the case, the only way this could happen is if the translation axes do not rotate with the element and the transform origin does not translate with the element during these transforms.
If they do, that means composite transforms are read and applied left to right (for the above, translating then rotating).
See this codepen example for an animated demonstration of what I mean (forgive my laziness in not animating the rotation for result 2 right-to-left along a curved path - hopefully it's clear enough what I'm getting at).
The contradiction comes in the Transform order section. It says
When an element is rotated before being translated, the translate direction is on the rotated axis. The axis as indicated with the dotted lines.
"Translation direction is on the rotated axis" should only be true if composite transforms are applied left to right, but as above, the Values section states they are applied right to left, meaning the axis should not rotate.
That part also implies it's talking about .two which is transform: rotate(135deg) translateX(200px); but the text says "when an element is rotated before being translated". This is either suddenly talking about the written order (which is confusing when inconsistent with the Values section talking about applied order), or composite transforms are actually applied left to right and the Values section needs to be amended.
I'm happy to PR fixed wording for this page but I need to clarify exactly what the behaviour is. Unfortunately, I haven't found a way to view the actual axes/transform origin during the transforms in devtools, so I cannot directly confirm the behaviour myself.
What did you expect to see?
Either the Values section says composite transforms are applied left to right
OR
The Transform order section is amended according to right-to-left composite transform behaviour, and is clear and consistent about what order it's referring to (ideally applied order, not mixing with written order).
Do you have any supporting links, references, or citations?
No response
Do you have anything more you want to share?
No response
MDN URL
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transform
What specific section or headline is this issue about?
Values and Transform order
What information was incorrect, unhelpful, or incomplete?
In the docs for
transform, under Values, it says that composite transforms are effectively applied in order from right to left. I interpret this to mean thattransform: translateX(200px) rotate(135deg);effectively rotates first by 135deg then translates along the X axis by 200px.If this is the case, the only way this could happen is if the translation axes do not rotate with the element and the transform origin does not translate with the element during these transforms.
If they do, that means composite transforms are read and applied left to right (for the above, translating then rotating).
See this codepen example for an animated demonstration of what I mean (forgive my laziness in not animating the rotation for result 2 right-to-left along a curved path - hopefully it's clear enough what I'm getting at).
The contradiction comes in the Transform order section. It says
"Translation direction is on the rotated axis" should only be true if composite transforms are applied left to right, but as above, the Values section states they are applied right to left, meaning the axis should not rotate.
That part also implies it's talking about
.twowhich istransform: rotate(135deg) translateX(200px);but the text says "when an element is rotated before being translated". This is either suddenly talking about the written order (which is confusing when inconsistent with the Values section talking about applied order), or composite transforms are actually applied left to right and the Values section needs to be amended.I'm happy to PR fixed wording for this page but I need to clarify exactly what the behaviour is. Unfortunately, I haven't found a way to view the actual axes/transform origin during the transforms in devtools, so I cannot directly confirm the behaviour myself.
What did you expect to see?
Either the Values section says composite transforms are applied left to right
OR
The Transform order section is amended according to right-to-left composite transform behaviour, and is clear and consistent about what order it's referring to (ideally applied order, not mixing with written order).
Do you have any supporting links, references, or citations?
No response
Do you have anything more you want to share?
No response