為網(wǎng)絡(luò)而生

CSS 3的屬性比如 border-radius 、 box-shadow 和 text-shadow 在webkit(Safari、Chrome等)和Gecko(Firefox)等先進(jìn)的瀏覽器中的使用開始出現(xiàn)增長的勢頭。它們(這些CSS屬性)已經(jīng)為用戶創(chuàng)建更輕量的頁面和更豐富的體驗(yàn)，而且它們可以優(yōu)雅的降級(jí)。然而，這些只是CSS 3能為我們做的眾多事情中的一小部分。

在本文中，我們將走的更遠(yuǎn)，看一看 變形(transformation)、轉(zhuǎn)換(transition)和動(dòng)畫(animation)等更高級(jí)的CSS3技術(shù)。我們將涉及代碼本身、瀏覽器支持以及一些可以正確地展示這些新屬性是如何即提升你的設(shè)計(jì)又增強(qiáng)整體用戶體驗(yàn)的例子。

CSS 變形(Transformation)

CSS transformation是W3C的一個(gè)草案。但當(dāng)我第一次坐下來閱讀 它的全部特性 以了解一些東西的時(shí)候，它并沒有讓我感到開竅。你可以想象的到，這個(gè)文檔是用技術(shù)術(shù)語的撰寫的，而且它更關(guān)注變形的圖形(比如繪圖)元素和矩陣。大一學(xué)習(xí)微積分之后就沒有碰過矩陣了，我必須為本章節(jié)做很多好的舊瀏覽器測試以及猜測和檢驗(yàn)。

在看完我能找到的每一個(gè)教程和大量的瀏覽器測試之后，我總結(jié)出一些大家都能從中獲益的有用的關(guān)于CSS變形的信息。

transform

transform屬性實(shí)現(xiàn)了一些可用 SVG 實(shí)現(xiàn)的同樣的功能。它可用于內(nèi)聯(lián)(inline)元素和塊級(jí)(block)元素。它允許我們旋轉(zhuǎn)、縮放和移動(dòng)元素——只需要一行CSS代碼。

一些前衛(wèi)設(shè)計(jì)的最大詬病就是文字不可選(必須要使用切圖的方法實(shí)現(xiàn))。當(dāng)你熟練使用transform屬性來控制文字的時(shí)候，這就不再是問題了，因?yàn)檫@是個(gè)純CSS方法，所以元素內(nèi)的文字會(huì)保持可選。這是CSS相對于使用圖片(或背景圖片)的一個(gè)巨大優(yōu)勢。

一些有趣而有用的變形功能：

• rotate
  Rotate(旋轉(zhuǎn))允許你通過傳遞一個(gè)度數(shù)值來轉(zhuǎn)動(dòng)一個(gè)對象。 

• scale
  Scale是一個(gè)縮放功能，可以讓任一元素變的更大。它使用正數(shù)和負(fù)數(shù)以及小數(shù)作為參數(shù)。 

• translate
  Translate就是基于X和Y 坐標(biāo)重新定位元素 

• skew
  顧名思義，skew就是要將對象傾斜，參數(shù)是度數(shù) 

• matrix
  transform支持矩陣變換，就是基于X和Y 坐標(biāo)重新定位元素 

讓我們更深入的了解每一個(gè)功能吧。

Rotate

transform屬性有很多用法，其中一個(gè)就是translate(旋轉(zhuǎn))。translate就是基于角度轉(zhuǎn)動(dòng)一個(gè)對象并可用于內(nèi)聯(lián)元素和塊級(jí)元素，它可以實(shí)現(xiàn) 很酷的效果 。

1
2
3
4
5

#nav{
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	}

請注意在IE8中(非標(biāo)準(zhǔn)模式)它需要你寫成“-ms-filter”而不是“filter”。

瀏覽器支持

瀏覽器對translate的支持令人驚奇的廣泛。在上面的CSS片段中，我們直接加上-webkit-和-moz-前綴然后將#nav元素旋轉(zhuǎn)-90度。

相當(dāng)簡單吧？唯一的問題是對于一個(gè)相當(dāng)重要的設(shè)計(jì)元素，如果IE不支持，很多設(shè)計(jì)師就會(huì)不情愿使用它。

幸運(yùn)的是，IE有這方面的濾鏡:圖形旋轉(zhuǎn)濾鏡。它可以有4個(gè)旋轉(zhuǎn)值：0, 1, 2,和3。你將不會(huì)獲得和Webkit和Gecko一樣的精密控制，但是至少在一定程度上保持統(tǒng)一(甚至IE6)。雖然這個(gè)濾鏡只支持4個(gè)值，顯得有些雞肋，但是對于IE來說，聊勝于無吧。