|
Rotate
transform屬性有很多用法，其中一個就是translate(旋轉(zhuǎn))。translate就是基于角度轉(zhuǎn)動一個對象并可用于內(nèi)聯(lián)元素和塊級元素，它可以實現(xiàn) 很酷的效果 。
#nav{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
請注意在IE8中(非標準模式)它需要你寫成“-ms-filter”而不是“filter”。
瀏覽器支持
瀏覽器對translate的支持令人驚奇的廣泛。在上面的CSS片段中，我們直接加上-webkit-和-moz-前綴然后將#nav元素旋轉(zhuǎn)-90度。
相當簡單吧？唯一的問題是對于一個相當重要的設計元素，如果IE不支持，很多設計師就會不情愿使用它。
幸運的是，IE有這方面的濾鏡:圖形旋轉(zhuǎn)濾鏡。它可以有4個旋轉(zhuǎn)值：0, 1, 2,和3。你將不會獲得和Webkit和Gecko一樣的精密控制，但是至少在一定程度上保持統(tǒng)一(甚至IE6)。雖然這個濾鏡只支持4個值，顯得有些雞肋，但是對于IE來說，聊勝于無吧。
scale
scale并不像你想象的那樣工作：簡單的縮小和放大一個元素�？s放功能同時采用寬和高兩個值，這些值可以是正數(shù)、負數(shù)和小數(shù)。
正數(shù)值放大一個元素，正如你期望的那樣，基于指定的寬度和高度。
負數(shù)值并不會縮小元素，而是翻轉(zhuǎn)它(比如，文字被反轉(zhuǎn))然后相應的縮放它。然而，你可以使用小于1的小數(shù)(例如.5)來收縮或者縮小一個元素。
#nav {
/* nav元素的寬和高都會被放大雙倍 */
-webkit-transform: scale(2);
-moz-transform: scale(2); }
#nav {
/* nav元素的寬會是雙倍，而高度保持不變 */
-webkit-transform: scale(2, 1);
-moz-transform: scale(2, 1);
}
#nav {
/* nav的寬度將是雙倍，并且水平翻轉(zhuǎn)，但是高度保持不變 */
-webkit-transform: scale(-2, 1);
-moz-transform: scale(-2, 1);
}
瀏覽器支持
scale屬性目前只有Firefox, Safari 和Chrome支持，到目前為止沒有一個IE版本支持�？s放一個對象是相當有意義的設計選擇。它可以通過漸進增強來使用:hover，這可以在你的導航上添加一個小小的趣味。
#nav li a:hover{
/* 這可以讓你的導航鏈接在鼠標經(jīng)過的時候輕微的放大 */
-webkit-transform: scale(1.1); -moz-transform: scale(1.1);
}
出處：前端觀察
責任編輯：bluehearts
上一頁 你需要知道的CSS3動畫技術 [1] 下一頁 你需要知道的CSS3動畫技術 [3]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 你需要知道的CSS3動畫技術 [2]
