一、CSS下兼容性的元素水平/垂直翻轉(zhuǎn)實(shí)現(xiàn)

隨著現(xiàn)代瀏覽器對(duì)CSS3的支持愈發(fā)完善，對(duì)于實(shí)現(xiàn)各個(gè)瀏覽器兼容的元素的水平翻轉(zhuǎn)或是垂直翻轉(zhuǎn)效果也就成為了可能。相關(guān)的CSS代碼如下：

/*水平翻轉(zhuǎn)*/.flipx {
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);    /*IE*/
    filter:FlipH;
}/*垂直翻轉(zhuǎn)*/.flipy {
    -moz-transform:scaleY(-1);
    -webkit-transform:scaleY(-1);
    -o-transform:scaleY(-1);
    transform:scaleY(-1);    /*IE*/
    filter:FlipV;
}

其中，就目前而言，對(duì)于基于webkit核心的瀏覽器，如Chrome以及Safari，實(shí)現(xiàn)元素的垂直翻轉(zhuǎn)或是水平翻轉(zhuǎn)也可以使用如下樣式：

/*水平翻轉(zhuǎn)*/.flipx { transform: rotateY(180deg); }/*垂直翻轉(zhuǎn)*/.flipy { transform: rotateX(180deg); }

注意：

1. 水平翻轉(zhuǎn)或垂直翻轉(zhuǎn)不同于旋轉(zhuǎn)180度。前者以軸為鏡像，后者以點(diǎn)為鏡像。

2. 如果是對(duì)稱元素，旋轉(zhuǎn)180度和翻轉(zhuǎn)的顯示效果基本上就是一致的，但是，非對(duì)稱元素就會(huì)看到明顯差異。

3. 對(duì)于后面提到的目前僅webkit核心瀏覽器支持的rotateY(180deg)，這里有個(gè)大寫的Y。我們都知道Y表示縱軸，所以我們可能會(huì)誤以為這里實(shí)現(xiàn)的是垂直翻轉(zhuǎn)，其實(shí)非也，這里的Y表示元素以縱軸為鏡像翻轉(zhuǎn)，也就是水平翻轉(zhuǎn)了。

由于這種水平或是垂直翻轉(zhuǎn)性質(zhì)的東西基本上類似于鏡像拷貝，于是，我們?cè)趙eb制作的時(shí)候，一旦遇到對(duì)稱出現(xiàn)的元素的時(shí)候，我們只需要處理一個(gè)元素就可以了，然后另外一個(gè)直接翻轉(zhuǎn)使用下。例如淘寶首頁(yè)的這個(gè)左右指向的按鈕：

我們非得分別把這兩個(gè)小按鈕圖標(biāo)都放在CSS Sprite里面嗎？顯然，答案是否定的。例如，我們只處理下朝左指向的小按鈕背景圖，然后朝右的直接使用水平翻轉(zhuǎn)就ok啦。豈不節(jié)約了切圖的時(shí)間，順便少了那么一點(diǎn)點(diǎn)圖片的東西，同時(shí)呢，CSS代碼量肯定也減少了——無(wú)需對(duì)左右兩個(gè)小按鈕分別寫hover效果啦！

這光巴拉巴拉唾沫橫飛顯然不能讓人信服，所以，我們來(lái)看幾個(gè)實(shí)例的例子吧，看看如何利用水平翻轉(zhuǎn)，或是垂直翻轉(zhuǎn)來(lái)提高我們web頁(yè)面上資源的重用性滴。

二、水平翻轉(zhuǎn)圖片重用應(yīng)用實(shí)例

您可以狠狠地點(diǎn)擊這里：水平翻轉(zhuǎn)圖片重用demo

demo頁(yè)面中有個(gè)不對(duì)稱的投影圖片，分別用在張含韻小姐圖片下，以及某段內(nèi)容標(biāo)題下，以達(dá)到某種卷邊效果。我們會(huì)發(fā)現(xiàn)，這兩處的投影圖片是不一樣的，一個(gè)是右下方的投影，還有一個(gè)是左下方的投影。如果你遇到這樣的設(shè)計(jì)你怎么辦，是分別切出共2張圖嗎？

既然本文是將翻轉(zhuǎn)的，顯然，這里顯然不是兩張不同的投影圖片了，而是同一張，只是其中某一個(gè)水平翻轉(zhuǎn)了，如下截圖標(biāo)示：

前前后后就只調(diào)用一張圖片，是不是資源得到了重用呢？

相關(guān)代碼可參見demo，這里就不重復(fù)展示了。

注意：由于IE下的元素翻轉(zhuǎn)是使用的filter濾鏡，所以，最好應(yīng)用翻轉(zhuǎn)的圖片尺寸不要拉伸，否則，某些情況下，在IE8瀏覽器中可能會(huì)看到讓他討厭的黑色邊緣線的。

三、水平翻轉(zhuǎn)元素重用應(yīng)用實(shí)例

淘寶網(wǎng)頂部條條上下拉列表項(xiàng)都有個(gè)向下的卡哇伊的小三角，如下圖所示：

鼠標(biāo)移上去小三角就會(huì)轉(zhuǎn)向：

但是呢，淘寶的做法是讓小三角旋轉(zhuǎn)個(gè)180度，嘖嘖嘖，這里的小三角幸好是左右對(duì)稱的，如果是長(zhǎng)得類似◢的小三角，就只有望洋興嘆的份了。所以，為了更廣泛地適應(yīng)各類翻轉(zhuǎn)情況，不要去使用180度的旋轉(zhuǎn)了，直接使用翻轉(zhuǎn)，OK，本部分的demo效果雖然與淘寶首頁(yè)的三角效果有些類似，但是，實(shí)現(xiàn)的原理是截然不同的，淘寶的是旋轉(zhuǎn)，而我的demo是翻轉(zhuǎn)。

您可以狠狠地點(diǎn)擊這里：水平翻轉(zhuǎn)元素重用demo

你可以看到如下的效果變化（默認(rèn) → 鼠標(biāo)移上去）：
 → 

好處啊什么的我就不牛皮了，結(jié)語(yǔ)啊什么的也都省了，一切盡在不言中。

原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明來(lái)自張?chǎng)涡?鑫空間-鑫生活[http://www.zhangxinxu.com]