原文:www.zhangxiyu
/*水平翻轉*/其中，就目前而言，對於基於webkit核心的瀏覽器，如chrome以及safari，實現元素的垂直翻轉或是水平翻轉也可以使用如下樣式：.flipx
/*垂直翻轉*/
.flipy
/*水平翻轉*/注意：水平翻轉或垂直翻轉不同於旋轉180度。前者以軸為映象，後者以點為映象。.flipx
/*垂直翻轉*/
.flipy
如果是對稱元素，旋轉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
你可以看到如下的效果變化（預設 → 滑鼠移上去）：
→好處啊什麼的我就不牛皮了，結語啊什麼的也都省了，一切盡在不言中。
水平垂直翻轉MC
水平垂直翻轉mc 水平翻轉 public static function fliph displayobj displayobject void var m matrix displayobj.transform.matrix.clone m.a 1 displayobj.transform.mat...
CSS 變形動畫 水平，垂直翻轉元素
css3的2d變形屬性，scale 用來縮放元素 放大和縮小 translate 在螢幕上移動元素 上下左右 rotate 按照一定角度旋轉元素 單位為度 skew 沿x和y軸對元素進行斜切，matrix 允許以畫素精度來控制變形效果。變形是在文件外發生的。乙個變形的元素不會影響它附近未變形元素的位...
水平和垂直翻轉可視物件
1 直接從flash選單上操作。選中乙個可視物件從選單 修改 變形 垂直翻轉 或者 修改 變形 水平翻轉 就可以實現物件的翻轉了。2 利用可視物件的scalex和scaley屬性 as2經常用這種方法 實現水平翻 displayobject.scalex displayobject.scalex 實...