[07/05][交流]CSS滤镜运用——FLIP（翻转）滤镜

happy-yan

Flip是CSS滤镜的翻转属性，FlipH代表水平翻转，FlipV代表垂直翻转。它们的表达式很简单，分别是： 　　Filter：FlipH 　　Filter：FlipV
看看效果吧：
效果图	代码
欢迎光临音画学堂 欢迎光临音画学堂	<table><td align=center><center> <font style="font-size:28PT;font-family:隶书;color=red">欢迎光临音画学堂</font></center></td></table> <table><td style="filter:flipv" align=center><center> <font style="font-size:28PT;font-family:隶书;color=red">欢迎光临音画学堂</font></center></td></table>
欢迎光临音画学堂 欢迎光临音画学堂	<table><td align=center><center> <font style="font-size:28PT;font-family:隶书;color=red">欢迎光临音画学堂</font></center></td></table> <table><td style="filter:fliph" align=center><center> <font style="font-size:28PT;font-family:隶书;color=red">欢迎光临音画学堂</font></center></td></table>
	<table><td align=center><center> <img src=http://photos12.flickr.com/13960503_916a77046c_o.jpg width=350 style="filter:fliph"> </center></td></table> <table><td style="filter:fliph" align=center><center> <img src=http://photos12.flickr.com/13960503_916a77046c_o.jpg width=350> </center></td></table>
	<table><td align=center><center> <img src=http://photos12.flickr.com/13960503_916a77046c_o.jpg width=350 style="filter:flipv"> </center></td></table> <table><td style="filter:flipv" align=center><center> <img src=http://photos12.flickr.com/13960503_916a77046c_o.jpg width=350> </center></td></table>

happy-yan

字体设置翻转时，要借助表格的翻转才行，图两样都行！大家可以试试以下的代码，就知道了^^

<font style="font-size:30pt;font-family:隶书;color=red;filter:fliph">音画学堂</font>

<table><td style="filter:fliph"><font style="font-size:30pt;font-family:隶书;color=red">音画学堂</font></td></table>

<img src=http://photos12.flickr.com/13960503_916a77046c_o.jpg> <br> <img src=http://photos12.flickr.com/13960503_916a77046c_o.jpg style="filter:fliph">

<table><td><img src=http://photos12.flickr.com/13960503_916a77046c_o.jpg></td> <td style="filter:fliph"><img src=http://photos12.flickr.com/13960503_916a77046c_o.jpg> </td></table>

[ 本帖最后由 happy-yan 于 2006-7-6 10:36 编辑 ]