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

其實我好像把命題弄錯了（我把解法�@當成命題），我以為我們需要�@個可以在�@個元素底下連續套用 transform 的方式。

不過，我想的方法應該還是沒變：

#demo {
 transform: translate(30px 60px) scale(0.5);
}
#demo.state-1 {
 transform-scale: 1.5; /* 蓋過 #demo 的 scale(0.5) */
}
#demo.state-2 {
 transform-scale: 2;
}
#demo.state-1:transform(1) {
 transform-rotate: 30deg; /* 這個的順序會晚於沒有下 pseudo-class selector 的屬性 */
 transform-translate: 20px 0; /* 不會蓋掉 #demo 的 translate：它是另�@次的 translate */
}

如果今天有個 element: <div id="demo" class="state-1" />

那它擁有的屬性將有下列（依照 scale > skew > rotate > translate 這個順序）：
transform-scale: 1.5;
transform-translate: 30px 60px;

還有�@個 pseudo-class :transform(1) selector 的屬性（用來定義下�@階段的 transform）
transform-rotate: 30deg;
transform-translate: 20px 0;

那它將會依序套用：
transform-scale: 1.5;
transform-translate: 30px 60px;
transform-rotate: 30deg;
transform-translate: 20px 0;

-- 
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 17:57:29 UTC