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

請看下面

(11/04/07 12:00), 魏藥/Medical-Wei wrote:
> 好像這樣的話還有 reset 的問題（如果今天要把 css transform 取消掉，要怎麼做？）

你是說，比如說 'transform: scale(2) translate(30px 10px); ' 要怎麼只取消
scale(2)？ 如果要全部取消是 'transform: none; ' 嘛。總之這兩個問題是明顯
相關的，現在一般的標準說法都是你要多準備幾個 <div> 來取消，不過加很多
<div> 很是很醜，而且違反表現是用 CSS 而不是在 HTML 亂搞得原則。

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

我有講過我講的第一個解法（其實不是我給的，我給的是第二個）的情況
下，transform 不是簡寫，所以順序是 transform > scale > skew > rotate >
translate ，也就是原來的 transform 總是先做，而且裡面的順序就是本來規範
定義的順序，而後面那些新屬性完全就是在最後作用的（所以這似乎很不直觀）。
原來 transform 順序不能改的原因是會毀掉現在已經在用這個屬性的網頁......
（向後相容很重要）

> 例如：
>
> #demo{
> transform: scale(2) translate(30px 10px);
> transform-translate: 30px 60px; /* 蓋掉上面一半的敘述 */
> }
>
> #demo:transform(1){
> transform-rotate: 45deg;
> }
>
> 出來的結果會先放大兩倍，平移 30px 60px 之後再做 45 度旋轉

大概了解你的意思，不過這個(1)是什麼意思？

> 缺點：
> * reset 會很麻煩

Kenny

Received on Thursday, 7 April 2011 16:11:53 UTC