水平反转背景图片

作者：kele5240 发布时间：December 15, 2011 分类：前端

这次新的项目因为要做一个这样的需求，又不想重新去做一个图。
记得IE下有一个滤镜好想是能实现水平反转来着，试了试果然可以。其他浏览器可以用CSS3来搞定。代码如下

<style type="text/css" media="screen">
	.kele{ width: 270px; height: 130px; background: url("http://www.baidu.com/img/baidu_sylogo1.gif") no-repeat scroll right bottom transparent; }
	.f180{ filter:fliph; transform:rotateY(180deg); -moz-transform:skew(0deg, 180deg) scale(-1, 1); -webkit-transform:rotateY(180deg); -o-transform:skew(0deg, 180deg) scale(-1, 1); }
</style>
<div class="kele"></div>
<div class="kele f180"></div>

标签: none

Kele's Home

水平反转背景图片

添加新评论 »

最新文章

瞎扯淡@sina

Links

其它