一、CSS下兼容性的元素水平/垂直翻轉實現

隨著現代瀏覽器對CSS3的支持愈發完善，對于實現各個瀏覽器兼容的元素的水平翻轉或是垂直翻轉效果也就成為了可能。相關的CSS代碼如下：

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

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

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

注意：

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

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

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

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

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

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

二、水平翻轉圖片重用應用實例

您可以狠狠地點擊這里：水平翻轉圖片重用demo

demo頁面中有個不對稱的投影圖片，分別用在張含韻小姐圖片下，以及某段內容標題下，以達到某種卷邊效果。我們會發現，這兩處的投影圖片是不一樣的，一個是右下方的投影，還有一個是左下方的投影。如果你遇到這樣的設計你怎么辦，是分別切出共2張圖嗎？

既然本文是將翻轉的，顯然，這里顯然不是兩張不同的投影圖片了，而是同一張，只是其中某一個水平翻轉了，如下截圖標示：

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

相關代碼可參見demo，這里就不重復展示了。

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

三、水平翻轉元素重用應用實例

淘寶網頂部條條上下拉列表項都有個向下的卡哇伊的小三角，如下圖所示：

鼠標移上去小三角就會轉向：

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

您可以狠狠地點擊這里：水平翻轉元素重用demo

你可以看到如下的效果變化（默認 → 鼠標移上去）：
→

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。