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. 计算机网络-TCP连接

    TCP首部20个字节 1.为什么TCP要三次握手建立连接? TCP连接过程,客户端发送请求到服务器,服务器确认请求发送到客户端,客户端再发送确认请求到服务器 原因:简言之,为了防止失效的连接请求发送到 ...

  2. Jetty应用服务器的安装详解

    Jetty是一个开源的Servlet容器和应用服务器,它极度轻量级.高便携性.功能强大.灵活和扩展性好,而且支持各种技术如SPDY.WebSocket.OSGi.JMX.JNDI和JAAS.Jetty ...

  3. Activiti 学习笔记记录

    官方在线用户手册(英文版):http://activiti.org/userguide/index.html 中文用户手册:http://www.mossle.com/docs/activiti/in ...

  4. git初体验（一）基础

    一.window下的git安装 1.安装教程 网上教程一堆,我参考的是这个:Git_Windows 系统下Git安装图解 还有这个也不错 2.环境搭建: 在配置完成后,自动加载到系统环境变量中,如我的 ...

  5. MySQL必知必会的查询

    前言: 据身边不少朋友反映,SQL长时间不用的话难免会生疏!本文的几个查询示例可以让你5分钟内快速回忆起MySQL中常用的基础查询语法! ------------ 如何用MySQL解决一些常见问题的例 ...

  6. [bzoj1984]月下“毛景树”

    Description 毛毛虫经过及时的变形,最终逃过的一劫,离开了菜妈的菜园.毛毛虫经过千山万水,历尽千辛万苦,最后来到了小小的绍兴一中的校园里.爬啊爬~爬啊爬~~毛毛虫爬到了一颗小小的" ...

  7. 【BZOJ-2599】Race 点分治

    2599: [IOI2011]Race Time Limit: 70 Sec  Memory Limit: 128 MBSubmit: 2590  Solved: 769[Submit][Status ...

  8. cmd执行命令返回执行信息

    /// <summary> /// 执行CMD语句 /// </summary> /// <param name="cmd">要执行的CMD命令 ...

  9. Microsoft SQL Server，错误: 229 解决方案

    今天我在数据库新建一个用户时,碰到了一个奇怪的问题,账号建好了,也指定了该账号上对应的数据库.但是,奇怪的问题出现了,死活不让我新建表,提示如下: 最后,给我找到问题所在了,就是在指定表权限的时候权限 ...

  10. CSS基础知识真难啊-font

    不吐不快啊!!!! 上午测试还好好的,下午再写一次准备发出来就出错了!! 传说中程序媛三大错觉:我肯定没错,刚才还好好的,一定是有人改了我代码.. 我的口头禅都快变成“刚刚还好好的”了! 事情是这样的 ...