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. css3 操作动画要点

    CSS3 有3种和动画相关的属性:transform, transition, animation. 不同点: 1.  触发条件不同.transition通常和hover等事件配合使用,由事件触发.a ...

  2. Kernel Methods (4) Kernel SVM

    (本文假设你已经知道了hard margin SVM的基本知识.) 如果要为Kernel methods找一个最好搭档, 那肯定是SVM. SVM从90年代开始流行, 直至2012年被deep lea ...

  3. css 小三角

    span{ display: inline-block; border-top: 100px solid red; border-right: 100px solid transparent; bor ...

  4. java.lang.IllegalStateException: Ambiguous mapping found. Cannot map 'XXXXX' bean

    今天启动srpingmvc项目的时候出现了这个异常, 原因: 在同个项目中,我复制了其中一个 Controller 作为备份 却忘记修改  @RequestMapping("/xxx&quo ...

  5. IOS-App installation failed原因及解决方法

    在用真机调试的时候,每次运行app都会弹出这个框,点击ok后,再次运行就没问题了.刚开始觉得没什么,无非就是多点几次,到后来,觉得这也很浪费时间,严重影响开发效率,在网上搜索了一遍后,决定将解决方案写 ...

  6. Java中为什么main()中不能创建内部类对象？

    对main方法而言,虽然写在类中,它是游离于任何类之外的,因此某类的非静态内部类对它而言是不直接可见的,也就无法直接访问 . 1:非静态内部类,必须有一个外部类的引用才能创建. 2:在外部类的非静态方 ...

  7. Java多线程与并发库高级应用-传统线程同步通信技术

    面试题: 子线程循环10次,接着主线程循环100次,接着又回到子线程循环10次,接着又 主线程循环100次,如此循环50次,请写出程序 /** * 子线程循环10次,接着主线程循环100次,接着又回到 ...

  8. Oracle数据库安装及配置（一）

    http://blog.csdn.net/phacker2010/article/details/7190126 1.安装 Oracle 版本:Oracle Database 10g Release ...

  9. 自动完成--autoComplete插件(2)

    远端的也可以成为本地的数据 4) lookupLimit 类型:数字 说明:本地数据显示的最大条数,服务器段的没有效果,服务器端的可以后台设置 默认:没有限制 5) lookupFilter 类型: ...

  10. 【bzoj1922】 Sdoi2010—大陆争霸

    http://www.lydsy.com/JudgeOnline/problem.php?id=1922 (题目链接) 题意 一张无向图,每个节点被k个节点保护,想要走到一个节点当且仅当它不被保护.你 ...