CSS濾鏡FlipH、FlipV屬性(對象的翻轉(zhuǎn))

2012/11/25 11:18:40作者：佚名來源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例介紹】

flip是CSS濾鏡的翻轉(zhuǎn)屬性，flipH代表水平翻轉(zhuǎn)，flipV代表垂直翻轉(zhuǎn)。

【基本語法】

filter：flipH
filter：flipV

【語法介紹】

【實(shí)例代碼】


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
</head>
<style type="text/css">
.p { filter: FlipH;}
.p1 { filter: FlipV;}
</style>
</head>
<body>
<table width="480" border="0" align="center" cellpadding="5" cellspacing="0">
  <tr>
     <td align="center" >原圖</td>
     <td align="center" >FlipH效果</td>
     <td align="center" >FlipV效果</td>
 </tr>
 <tr>
<td width="150" align="center" >
<img src="4.jpg" width="188" height="188" /></td>
<td width="150" align="center" class="p">
<img src="4.jpg" width="188" height="188" /></td>
<td width="150" align="center" class="p1">
<img src="4.jpg" width="188" height="188" /></td>
 </tr>
</table>
</body>
</html>

【代碼分析】

在代碼中，加粗部分的標(biāo)簽用來設(shè)置對象的翻轉(zhuǎn)，在瀏覽器中預(yù)覽效果，如圖所示。

對象的翻轉(zhuǎn)flipH、flipV運(yùn)行效果