中国设计联盟
联网
Dreamweaver Flash Photoshop 其它周边 web标准 asp php .net CSS WAP网站攻略 专题
域名注册 虚拟主机 广州网站设计 域名注册 广州网站建设 上海网站建设 虚拟主机 广州网页设计 签名设计 虚拟主机 域名注册 acg王国 ACG玩家
求创科技
上海网麒科技
中国福网
数字引擎
招聘求职
中国互联
时代互联
中资源
当前位置:网络学院首页 >> 设计教程 >> web标准 >> CSS滤镜实现图片翻转

CSS滤镜实现图片翻转

来源:中国设计秀    作者:    点击:80     加入收藏
中国品牌设计网

图片水平翻转

代码:

1、内部插入式

在〈head〉与〈/head〉之间插入:

style type = text/css〉

.TurnH{filter:FlipH}

/style〉

然后在图片属性代码中加class="TurnH"。

注意:在〈head〉与〈/head〉之间插入代码中,TurnH前有一个“.”(不包括引号),请一定不要漏掉了。

2、直接插入式

在图片属性代码中加入:

style=" filter: FlipH"

效果如图1。


图1

特点:通过使用CSS的“FlipH”滤镜,使图片水平翻转。“FlipH”滤镜是CSS的6个无参数滤镜中的一个,可直接使用,在Dreamweaver中可以同有参数的滤镜一样使用。

图片垂直翻转

代码:

1、内部插入式

在〈head〉与〈/head〉之间插入:

〈style type = text/css〉

.TurnV{filter:FlipV}

〈/style〉

然后再在图片属性代码中加class="TurnV"。

注意:在〈head〉与〈/head〉之间插入代码中,TurnV前有一个“.”(不包括引号),请一定不要漏掉了。

2、直接插入式

在图片属性代码中加入:

style="filter:FlipV"

效果如图2。


图2

特点:通过使用CSS的无参数滤镜“FlipV”滤镜,使图片垂直翻转
0
顶一下
2007-10-22 12:25:00    出处:
网站地图 | 关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口