查看效果：http://hovertree.com/texiao/css3/17/
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>css圖片水平和垂直翻轉 - 何問起</title><base target="_blank" />
<meta charset="utf-8" />
<style>
/*水平翻轉*/
.hewenqiflipx {
-moz-transform:scaleX(-1);
-webkit-transform:scaleX(-1);
-o-transform:scaleX(-1);
transform:scaleX(-1);
/*IE*/
filter:FlipH;
}
/*垂直翻轉*/
.hewenqiflipy {
-moz-transform:scaleY(-1);
-webkit-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1);
/*IE*/
filter:FlipV;
}
/*基於webkit核心的浏覽器*/
/*水平翻轉*/
.hovertreeflipx { transform: rotateY(180deg); }
/*垂直翻轉*/
.hovertreeflipy { transform: rotateX(180deg); }
a{color:blue;}
</style>
</head>
<body>
<div>
<h2>css圖片水平和垂直翻轉</h2><a href="http://hovertree.com/h/bjaf/d339euw9.htm">原文</a>
<a href="http://hovertree.com">首頁</a>
<a href="http://hovertree.com/texiao/">特效</a>
<br />
</div>
原圖：<br />
<img src="http://hovertree.com/hvtimg/bjafjd/btl1cbfc.gif" />
<br />水平翻轉圖：<br />
<img src="http://hovertree.com/hvtimg/bjafjd/btl1cbfc.gif" class="hovertreeflipx"/>
<br />垂直翻轉圖：<br />
<img src="http://hovertree.com/hvtimg/bjafjd/btl1cbfc.gif" class="hewenqiflipy" />
</body>
</html>