/*水平翻轉*/ .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); }

注意：

1. 水平翻轉或垂直翻轉不同于旋轉180度。前者以軸為鏡像，后者以點為鏡像。
2. 如果是對稱元素，旋轉180度和翻轉的顯示效果基本上就是一致的，但是，非對稱元素就會看到明顯差異。
3. 對于后面提到的目前僅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

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

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

本文標題：CSS垂直翻轉/水平翻轉提高web頁面資源重用性
標題路徑：http://m.newbst.com/news13/173663.html

成都網站建設公司_創新互聯，為您提供建站公司、網站維護、網站建設、定制網站、網站設計、響應式網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯