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

規定 transform-* 的順序，是個對新手的埋伏。何況有些情形預先指定的順序未必是 designer 喜歡的或是自然的順序。

就算用 also-transform 也沒解決指定多次的順序問題吧？

#demo.state-1 {
 also-transform: rotate(45deg);
 also-transform: translateX(20px);
}

是先轉再平移、還是先移再轉、還是後取代前所以只移不轉？

我不熟 CSS，

#demo.state-1 {
 transform-rotate: 45deg;
 transform-translateX: 20px;
}

是否可以解釋為先轉後移？


Kang-Hao (Kenny) Lu <kennyluck@w3.org> 於 2011年4月6日下午6:46 寫道：

> 抱歉，再來一個 CSS 的討論。這是最近想到的最後一個了，下一個就是正統的
> HTML5 討論了。
>
> 大家都知道：
> 1. CSS 很多屬性是速記屬性（shorthand），比如說 border = border-width +
> border-style + color，border-width = border-top-width +
> border-right-width + border-bottom-width + border-left-width 等等
>
> 2. transform 的用法是函數的疊加，比如說 transform: translate(100px)
> rotate(20deg) 是先順時針轉 20 度在向右移 100 度（以後要教學生數學就用
> transform 教吧 :p）
>
> 在 CSS 工作組的郵件群組 www-style 上，一個叫做 Aaron Gustafoson 的 Web
> Developer 提了這個問題[1]：
>
> [[
> 假設我有一個 id 為 demo 元素，有兩個狀態的
>
> #demo {
>  transform: scale(2);
> }
> #demo.state-1 {
>  transform: scale(2) rotate(45deg);
> }
> #demo.state-2 {
>  transform: scale(2) rotate(90deg);
> }
>
> 需要寫那個 scale(2) 一次又一次，很冗長，如果我們可以這樣做呢
>
> #demo {
>  transform: scale(2);
> }
> #demo.state-1 {
>  transform-rotate: 45deg;
> }
> #demo.state-2 {
>  transform-rotate: 90deg;
> }
>
> 也就是把 transform 拆成 transform-rotate, transform-translate,
> transform-scale 之類的，然後 transform 就是這些屬性的速記。怎麼樣呢？
> ]]
>
> [1] http://lists.w3.org/Archives/Public/www-style/2011Mar/thread#msg564
>
> 數學好的興趣小組成員可能一眼就會看出這種想法的問題在哪，其實問題關鍵在於
> 'transform: translateX(100px) rotate(45deg)' 跟 'transform:
> rotate(45deg) translateX(100px)' 是不一樣的變換！（又可以教數學了 xd）。
> 所以說如果 transform 是 transform-* 的速記的話
>
> transform-rotate: 45deg;
> transform-translateX: 100px
>
> 會無法*簡單*的定義結果
>
> 其實類似的狀況還發生在 background-*（多背景） *-shadow（多陰影） 等等能
> 吃一排取值排序有差的屬性上，總之就是怎麼樣也可以只微調一部份的取值的這個
> 問題。
>
> 大家有什麼想法？
>
> www-style 上有一人（包括我）提了一些.... 有點不太漂亮的解法
>
> == 解法一 ==
>
> 其實只管 transform 的這個情形，可能有以下的辦法：
>
> 仍然引入 transform-* 但是它們不是 transform 的展開屬性，而是發生在
> transform 之後的一些附加轉換，然後要定義一個發生的順序，比如說：
>
> transform > transform-scale > transform-skew > transform-rotate >
> transform-translate
>
> 這個解法的問題：
> 1. 上面的順序只能隨便選一個
> 2. transform 不是 transform-* 的速記恐怕會造成以後很多人學習的困擾
>
> == 解法二（我提的） ==
>
> 引入 also-transform 這個屬性。這個屬性就跟它的名字暗示的意思一樣，發生在
> transform 之後的 transform，所以剛剛那個例子就是可以寫成：
>
>
> #demo {
>  transform: scale(2);
> }
> #demo.state-1 {
>  also-transform: rotate(45deg);
> }
> #demo.state-2 {
>  also-transform: rotate(90deg);
> }
>
> 這種解法基本上可以推廣到 also-background 跟 also-*-shadow 等等，就是要定
> 義一個這些屬性的「累加」（例： also-background 總是畫在 background 之後
> 等等）
>
> 這個解法的問題：
> 名字太醜
>
>
> 所以總之目前為止用*比較正常*的方法是沒什麼好辦法的。但是以上名字太醜這個
> 問題，假如引入新的 CSS 的語法呢？例如：'+transform: rotate(45deg)' 之類呢。
>
> 我覺得一個很重要的問題應該問的問題是，SASS 對於這個問題到底有沒有解法，
> 有沒有熟 SASS 的人可以解釋一下的。用前置處理加上新的語法真的能解決這個問
> 題嗎？
>
> 大家千萬不要以為 SASS 跟 CSS 沒關係啊，現在 Google 的人在試玩的兩個提案
> CSS Variable[2] 跟 CSS Mixins[3] 基本上都是 SASS 有很久的功能 :p
>
> [2] http://www.xanthir.com/blog/b4AD0
> [3] http://www.xanthir.com/blog/b4Av0
>
> 大家覺得呢？
>
>
> 此致
> Kenny, 中文興趣小組W3C連絡人
> 推特: http://twitter.com/kanghaolu
> 噗浪: http://www.plurk.com/kennyluck
> 新浪微博: http://t.sina.com.cn/1950042164 （還不是很有東西）
>
>
>
>
>