Why are "transform" properties grouped? - css

Question

It seems a bit counter intuitive to have properties, which on their own are key:value pairs, be grouped together. Especially since most of them are quite different and can still be used simultaneously as long as you know how to write it. In case it's not clear what I'm talking about, my question is this. Why is the following:
transform: rotate(40deg) scaleX(1,5) translate(-10px, 20px);
Not written like so:
rotation: 40deg;
scaleX: 1.5;
translate: -10px 20px;
This way each property can be manipulated on their own, without having to keep track of the sibling values. There must be a good reason the W3 choose this approach, so does anyone know it?

Answer 1

That's because transforms are not commutative. Therefore, the order matters.
For example, if you use a translation after a rotation, the translation direction will be rotated too.
.first::after {
transform: rotate(180deg) translateX(50px);
}
.second::after {
transform: translateX(50px) rotate(180deg);
}
body {
display: flex;
flex-direction: space-around;
}
div {
height: 100px;
width: 100px;
border: 5px solid;
margin: 25px auto;
}
div::after {
content: 'Hello';
display: block;
height: 100%;
width: 100%;
background: yellow;
opacity: .5;
}
.first::after {
transform: rotate(180deg) translateX(50px);
}
.second::after {
transform: translateX(50px) rotate(180deg);
}
<div class="first"></div>
<div class="second"></div>
With different CSS properties, you couldn't choose the order you want. That's the limitation of CSS Transforms level 2 that BoltClock mentioned, the spec defines an order and you can't alter it.

Answer 2

The CSS transform property originated from SVG transforms, where a space-delimited list of transform functions is provided as a value for the SVG transform attribute. The CSS transform property is most likely a direct port of that.
Of course, hindsight has shown this to be a terrible mistake, and the transform functions will be promoted to their own CSS properties in CSS Transforms level 2, with almost the exact syntax that you have proposed (there aren't individual scaleX/Y/Z properties yet). Their interaction with the transform property is accounted for, although the draft notes that the transformation matrix will be changed to accommodate how the new properties will interact with respect to the cascade.

Answer 3

I agree that the option with individual would be nice, as you for example would be able to manipulate them with ease with Javascript. The probable reason that this isn't the case is that the order of the declarations matter with transform. The axes on which the element moves change when you rotate the element etc.
/* Transform */
.translate {
transform: translateX(200px) rotateZ(90deg);
}
.rotate {
transform: rotateZ(90deg) translateX(200px);
}
/* Demo */
div {
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 10px;
position: relative;
}
div.translate:before {
position: absolute;
display: block;
content: '';
width: 100px;
height: 200px;
top: 100px;
left: 0;
border:2px dashed #333;
border-top:none;
box-sizing:border-box;
}
div.rotate:before {
position: absolute;
display: block;
content: '';
width: 200px;
height: 100px;
top: 0;
left: -200px;
border:2px dashed #333;
border-right:none;
box-sizing:border-box;
}
<div class="translate">
</div>
<div class="rotate">
</div>