Why are the "transform" properties grouped?

Question

It seems that the counter bit is intuitive for properties that are themselves key: value pairs are grouped together. Moreover, most of them are completely different and they can be used simultaneously, as long as you know how to write them. If it's not clear what I'm talking about, my question is this. Why the following:

transform: rotate(40deg) scaleX(1,5) translate(-10px, 20px); 

Not written like this:

 rotation: 40deg; scaleX: 1.5; translate: -10px 20px; 

Thus, each property can be managed independently, without the need to track the values ​​of the marriage. There must be a good reason W3 chooses this approach, so does anyone know this?

Answer 1

This is because transformations are not commutative . Therefore, order matters.

For example, if you use a translation after a turn, the direction of the translation will also be turned.

 .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 cannot select the order you want. With the CSS Transforms level 2 constraint mentioned by BoltClock , spec defines the order and you cannot change it.

Answer 2

The CSS transform property is derived from SVG transforms, where a list of conversion functions with delimiter separators is provided as the value of the SVG transform attribute. The CSS transform property is most likely a direct port to this.

Of course, in hindsight it seemed like a terrible mistake, and the conversion functions would advance to their own CSS properties in CSS Transforms level 2 , with almost the exact syntax you suggested (no individual scaleX / Y / Z properties yet). Their interaction with the transform property is taken into account, although the project notes that the transformation matrix will be changed to take into account how the new properties will interact with respect to the cascade.

Answer 3

I agree that the option with the person will be enjoyable, since you, for example, could easily manipulate them using Javascript. The likely reason this is not the case is because the order of the declarations is transform . The axes on which the element moves change when the element rotates, 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>