Re: transform 的展開屬性 - transform-rotate, transform-translate.... ?

Kang-Hao (Kenny) Lu <kennyluck@w3.org> 於 2011年4月7日上午3:27 寫道：

> [恕刪]
>
> 這個定義不完全
>
> #demo.state1 {
>   transform-rotate: 45 deg;
> }
> #demo {
>   transform-translateX: 20px;
> }
>
> 的時候 <div id="demo" class="state1"> 哪個先呢？也是 source code 上的順序嗎？那這樣 CSS
> 資料結構要記哪個 {...} 先哪個後耶，好像會影響效率影響的很慘的樣子...
>

沒記錯的話，#id.class 指令蓋過 #id 指令蓋過 class 指令，但「蓋過」是指同個屬性的指令，下例的結果應該是 rotate 45deg。

#demo {
  transform-rotate: 90 deg;
}
#demo.state1 {
  transform-rotate: 45 deg;
}

不同屬性的話，瀏覽器會算出要接受的指令集，再「一一」應用上去。之前的指令都是可交換的（commutative），沒有順序的問題。transform-*
指令是不可交換的（noncommutative）（就是說順序交換結果會變），就有順序問題。不只要定義同級的指令順序（同級：都在 ID 裡、都在
class 裡... 等等），還要定義不同級之間的指令順序。

也許這就是當初不想幫 transform 生小孩的原因？全部用 transform 就可以沿用原有的「蓋過」邏輯。

如果真要訂順序，感覺上比較自然的順序可能是「同級：看檔案中的先後」、「不同級：低等級先、高等級後」。


>
>
> Kenny
>