CSS垂直翻轉(zhuǎn)/水平翻轉(zhuǎn)提高web頁面資源重用性

/*水平翻轉(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)使用下。例如淘寶首頁的這個(gè)左右指向的按鈕：

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

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

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

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

demo頁面中有個(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效果雖然與淘寶首頁的三角效果有些類似，但是，實(shí)現(xiàn)的原理是截然不同的，淘寶的是旋轉(zhuǎn)，而我的demo是翻轉(zhuǎn)。

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

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

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

文章標(biāo)題：CSS垂直翻轉(zhuǎn)/水平翻轉(zhuǎn)提高web頁面資源重用性
網(wǎng)站網(wǎng)址：http://www.muchs.cn/news/173663.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、網(wǎng)站收錄、外貿(mào)網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、關(guān)鍵詞優(yōu)化、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)