爲什麼css轉換屬性不是獨立的css屬性？

爲什麼決定將所有變換屬性添加到一個CSS屬性？爲什麼css轉換屬性不是獨立的css屬性？

相反的：

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

可以寫成：

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

爲什麼選擇第一種變型？這是否與變換矩陣有某種聯繫？或前綴？

例如，當您編寫media queries例如，您需要複製整個transform屬性（不DRY），在其他情況下，它將被覆蓋。創建轉換，切換狀態等時出現同樣的問題......這真的很不舒服。

歡迎對場景背後發生的情況進行解釋。

來源

2016-11-07 Octavian Lari

第二個變體不存在。這完全錯了。 – pol

@pol我知道，我介紹了一個如何更容易的例子。 –

CSS級別4有一個建議，使這些所有單個屬性。至於爲什麼他們不是從一開始就要問W3C。 –

因爲它不僅僅是一組屬性，它還是一個列表，按順序應用轉換，並且單個轉換類型可以在列表中多次出現。

所以，你可以做例子：

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位置在應用了變換的順序的影響。

來源

2016-11-07 13:26:57 Alohci

爲什麼css轉換屬性不是獨立的css屬性？

回答

相關問題