Почему свойства css transform не являются отдельными свойствами css?

Question

Почему было решено добавить все свойства преобразования в одно свойство css?

Вместо:

.element { 
    transform: translateX(50%) rotateZ(45deg) scale(0.8); 
} 

можно было бы написать:

.element { 
    translate-x: 50%; 
    rotate-z: 45deg; 
    scale: 0.8; 
} 

Почему был выбран первый вариант? Связано ли это с матрицей преобразования? Или префиксы?

Например, если вы пишете media queries, вам необходимо скопировать всю собственность transform (не DRY), в другом случае она будет перезаписана. Та же проблема при создании переходов, переключения состояний и т. Д. Это действительно неудобно.

Объяснение того, что происходит за сценой, приветствуется.

Answer 1

Поскольку это не просто набор свойств, это список, в котором преобразования применяются по порядку, и один тип преобразования может встречаться более одного раза в списке.

Таким образом, вы можете, например, сделать:

div { 
 
    height:100px; 
 
    width: 100px; 
 
} 
 
.one { 
 
    background-color:red; 
 
    transform:translate(50%,5%) scale(0.5) 
 
    rotate(45deg) translate(50px,10px) 
 
} 
 
.two { 
 
    background-color:blue; 
 
    transform:scale(0.5) translate(50%,5%) 
 
    rotate(45deg) translate(50px,10px) 
 
}

<div class="one"></div> 
 
<div class="two"></div>

И вы можете видеть, что X-положение алмаза зависят от порядка, в котором применяется преобразование.