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

好像這樣的話還有 reset 的問題（如果今天要把 css transform 取消掉，要怎麼做？）

我是想到可以用 pseudo-class 解釋套用的順序，沒有定義的最先套用，套用順序相同的就依照 Kenny
給的第�@個解法的順序來套（scale >skew >rotate > translate），即使是展開屬性或是簡寫都用相同的順序去處理。


例如：

#demo{
transform: scale(2) translate(30px 10px);
transform-translate: 30px 60px; /* 蓋掉上面�@半的敘述 */
}

#demo:transform(1){
transform-rotate: 45deg;
}

出來的結果會先放大兩倍，平移 30px 60px 之後再做 45 度旋轉


缺點：
* reset 會很麻煩

在 2011年4月7日上午9:15，pingooo <ping.nsr.yeh@gmail.com> 寫道：
>
>
> 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
>
>



-- 
Medical-Wei/魏藥

----
Please avoid sending me Word or PowerPoint attachments.
See: http://www.gnu.org/philosophy/no-word-attachments.html
請儘可能不要寄給我 Microsoft Word 或是 PowerPoint 的附件，我會打不開。
參照：http://blog.ofset.org/ckhung/index.php?post/081-nodocx

Received on Thursday, 7 April 2011 03:00:58 UTC