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

在 Kenny 的方案二的基础上, 我认为这样比较好:

transform-next : 按顺序执行指定的效果
transform-reset : reset 指定的效果

理由:

   1. 简单清晰, also/next 都说明了在原 transform 上额外应用的效果, 其中我认为 next 更清晰明确地表
   示先后顺序
   2. 每一个 also/next 都是一个完整的 transform, 有利于减少冗余代码和各方面的维护工作.
   transform-rotate 的形式, 每增加一个新的函数 (如 bounce), 那就要相应有一个 transform-bounce,
   而 also/next 则无需更改语法
   3. 在 reset transform 的时候, 可以用 transform-reset: all/rotate/... 简单且统一
   4. 还有就是对编码风格的影响:
   transform: rotate;
   transform-next: translateX;
   比起
   transform: rotate;
   also-transform: traslateX
   有更好的编码风格, 也可以通过 t 字符检索所有属性 (这点比较主观)


Regards,

Chris

-- ねだるな、かちとれ、さすればあたえられん --


2011/4/7 魏藥/Medical-Wei <medicalwei@gmail.com>

> 好像這樣的話還有 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
>