1、HTML代码

 <!DOCTYPE html>

 <html>

 <head>

 <title>test</title>

 </head>

 <body>

 <img src="data:images/left.png">

 <img src="data:images/left.png" class="flip-horizontal"/>

 <img src="data:images/left.png" class="flip-vertical" />

 </body>

 </html>

2、CSS代码

 .flip-horizontal {

 -moz-transform: scaleX(-1);

 -webkit-transform: scaleX(-1);

 -o-transform: scaleX(-1);

 transform: scaleX(-1);

 filter: fliph; /*IE*/ }

 .flip-vertical {

 -moz-transform: scaleY(-1);

 -webkit-transform: scaleY(-1);

 -o-transform: scaleY(-1);

 transform: scaleY(-1);

 filter: flipv; /*IE*/ }

CSS3 让图片镜像对称的更多相关文章

  1. jQuery/CSS3实现图片层叠展开特效

    这是一款基于jQuery和CSS3的图片层叠展开特效,让鼠标滑过图片时即可触发这些特效.其中有一款就像扇子展开收拢一样,看起来效果都非常不错.当然本文主要还是来分析一下用jQuery实现这一效果的方法 ...

  2. 第八十节，CSS3边框图片效果

    CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释     CSS3 ...

  3. 使用纯css3实现图片轮播

    <!DOCTYPE html> <html> <head> <title> 飛天网事--纯CSS代码实现图片轮播 </title> < ...

  4. css3实现图片旋转效果

    css3实现图片旋转效果 近期实现一个消息提醒(醒目)的需求页面.想到了css3的旋转动画,故使用. =============== 鼠标悬浮时候,图片可以旋转,放大 rotate(360deg) s ...

  5. css3 实现图片等比例放大与缩小

    css3 实现图片等比例放大与缩小 在工作中,经常会碰到图片缩放的情况,比如服务器端返回的图片大小,可能大小不同,有的大,有的小,服务器端返回的图片大小我们不能控制的,但是在我们设计稿的时候,可能会规 ...

  6. CSS3实现图片木桶布局

    CSS3实现图片木桶布局 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <script> window.navigator.appVersion.inde ...

  7. 纯css3实现图片三角形排列

    当今是个读图时代.纯大部分网页或多或少都会用到图片.特别是图片较多的网页.图片的布局和排版就非常重要了.今天要给大写带来一款纯css3实现图片三角形排列.适合一系列的图片.效果图如下: 在线预览    ...

  8. CSS3实现图片黑白滤镜居中，hover缩放遮罩的效果

       hover: 在前端开发中经常会遇到项目展示,往往会采用卡片方式来描述.众多网站中,普遍采用CSS3的scale()方法来实现交互. 本文即是利用纯CSS实现图片居中缩放,此类方法各大网站均有应 ...

  9. 纯CSS3实现图片展示特效

    本文中要实现的一个纯CSS3的图片展示特效,以前只能用JavaScript实现,可想而知会受到多方面的限制,特别是性能.而今天我们将用简单的CSS3代码实现,你会发现它的动画效果在现代浏览器的帮助下无 ...

随机推荐

  1. 通过javascript在网页端生成zip压缩包并下载

    zip.js是什么 zip.js的github项目地址:http://gildas-lormeau.github.io/zip.js/ 通过zip.js封装一个能在网页端生成zip文件的插件, 直接在 ...

  2. CSS截取截取字符长度并显示省略号的方法

    HTML部分 <div> <span>这是一个CSS3截取截取字符的例子.它根据宽度来处理.</span> </div> <div class=& ...

  3. poj2553 强连通缩点

    The Bottom of a Graph Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 10114   Accepted: ...

  4. Java算法-冒泡排序

    冒泡排序是一种简单的排序算法.它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成.这个算法的名字 ...

  5. SurfaceView, TextureView, SurfaceTexture等的区别

    SurfaceView, GLSurfaceView, SurfaceTexture以及TextureView是Android当中名字比较绕,关系又比较密切的几个类.本文基于Android 5.0(L ...

  6. UML中几种类间关系：继承、实现、依赖、关联、聚合、组合的联系与区别

    继承 指的是一个类(称为子类.子接口)继承另外的一个类(称为父类.父接口)的功能,并可以增加它自己的新功能的能力,继承是类与类或者接口与接口之间最常见的关系:在Java中此类关系通过关键字extend ...

  7. mysql列转行

    要得到 SELECT name, SUM(CASE course WHEN '语文' THEN score END ) AS '语文', SUM(CASE course WHEN '数学' THEN ...

  8. mysql导入sql文件，乱码，一个例子

    服务器centos,其他数据库都是utf8都正常能用 网页正常显示 这次导入一个utf8格式数据库文件 结果网页上乱码 在导出的sql文件中,注释部分有些语句也是被mysql考虑的.导出的sql文件, ...

  9. 【BZOJ-1096】仓库建设 斜率优化DP

    1096: [ZJOI2007]仓库建设 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 3719  Solved: 1633[Submit][Stat ...

  10. 前端打包/自动化构建工具：fis3

    据说这个可以进行打包,并且可以实现类似/script/test-adsf123.js或者/script/test.js?v=asdf123 先做个记号 参考:http://fis.baidu.com/