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. Python 字符串操作

    Python 字符串操作(string替换.删除.截取.复制.连接.比较.查找.包含.大小写转换.分割等) 去空格及特殊符号 s.strip() .lstrip() .rstrip(',') 复制字符 ...

  2. 【POJ 2187】Beauty Contest（凸包直径、旋转卡壳）

    给定点集的最远两点的距离. 先用graham求凸包.旋(xuán)转(zhuàn)卡(qiǎ)壳(ké)求凸包直径. ps:旋转卡壳算法的典型运用 http://blog.csdn.net/hanch ...

  3. AS技巧合集「编码技巧篇」

    转载:http://www.apkbus.com/forum.php?mod=viewthread&tid=254725&extra=page%3D2%26filter%3Dautho ...

  4. css-使用line-height实现垂直居中的一些问题

    网上都是这么说的,把line-height值设置为height一样大小的值可以实现单行文字的垂直居中.这句话确实是正确的,但其实也是有问题的.问题在于height,看我的表述:"把line- ...

  5. Leetcode 347. Top K Frequent Elements

    Given a non-empty array of integers, return the k most frequent elements. For example,Given [1,1,1,2 ...

  6. Leetcode 300 Longest Increasing Subsequence

    Given an unsorted array of integers, find the length of longest increasing subsequence. For example, ...

  7. ubuntu使用备忘

    今天在一个古董机子上(03年的)安装了lubuntu14.04,内存512M,奔腾处理器,好像是什么迅驰不支持linux需要的某项技术pae,安装时提示cpu不支持pae,但可以在内核参数中添加for ...

  8. WAF(Web Appliction Firewall) Bypass Technology Research

    catalog . What is Firewall . Detecting the WAF . Different Types of Encoding Bypass . Bypass本质 1. Wh ...

  9. PHP框架中的日志系统

    现在在一家公司做PHP后台开发程序猿(我们组没有前端,做活动时会做前端的东西),刚开始到公司的时候花2个周赶出了一个前端加后台的活动(记得当时做不出来周末加了两天班...),到现在过去4个多月了,可以 ...

  10. MyEclipse 8.5 注册码 生成代码

    import java.io.*; public class MyEclipseGen { private static final String LL = "Decompiling thi ...