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

隨著現(xiàn)代瀏覽器對CSS3的支持愈發(fā)完善，對于實(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; }

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

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

注意：

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

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

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

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

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

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

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

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

demo頁面中有個(gè)不對稱的投影圖片，分別用在張含韻小姐圖片下，以及某段內(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度，嘖嘖嘖，這里的小三角幸好是左右對稱的，如果是長得類似◢的小三角，就只有望洋興嘆的份了。所以，為了更廣泛地適應(yīng)各類翻轉(zhuǎn)情況，不要去使用180度的旋轉(zhuǎn)了，直接使用翻轉(zhuǎn)，OK，本部分的demo效果雖然與淘寶首頁的三角效果有些類似，但是，實(shí)現(xiàn)的原理是截然不同的，淘寶的是旋轉(zhuǎn)，而我的demo是翻轉(zhuǎn)。

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

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

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

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的CSS垂直翻转/水平翻转提高web页面资源重用性的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。