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. git 格式化输出版本信息

    git log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)&l ...

  2. js_RGB转16进制(rgb2hex)

    输入:rgb(13,0,255) 输出:#0d00ff 在线颜色转换工具:http://www.atool.org/colorpicker.php 1 2 3 4 5 6 7 8 9 function ...

  3. 网络流HDU 2883

    建图           源点  ->     每个人  ->           每段时间      ->      汇点 时间要离散化一下 分成一些时间段 权           ...

  4. hibernate-DetachedCriteria实现关联表条件复查

    表结果如下 CREATE TABLE `ent_lable` ( `idStr` ) NOT NULL, `pk_1` ) NOT NULL, `pk_2` ) NOT NULL, PRIMARY K ...

  5. 安装python-docx

    安装环境: windows 7 64位 python 3.4.2 64位 说明: 用pip install python-docx不行,当装lxml时出现错误,一直卡在那. 安装非官方的版本,如下图, ...

  6. Yii学习

    今天保存出错,但是什么也没提示,所以就查了下,怎么输出错误 $model->save(); $model->getErrors(); 获取,刚插入数据的id $reply->save ...

  7. 【GCJ2008E】日程表 最小割

    Google Code Jam 2008 E 日程表 [题目描述] 热情的选手Sphinny正在看新一年的日程表,并发现已经安排了很多编 程竞赛.她将这一年的每一天都用以下三种方式之一在日程表上打标记 ...

  8. VS中的代码段功能

    1.前言 开发人员不喜欢打字.如果你希望提高开发人员的生产力,减少键入的数量,这也同时减少打字稿的数量以及因此产生的编译器错误,这些都极大分散了开发人员的注意力.代码重用是开发人员收集代码的另一个原因 ...

  9. python之简单POST模拟登录

    宿舍自从换了校园网的认证系统就不再用客户端了,只能在网页登录.每次上网都要打开浏览器的话很不方便,而且我有时在ubuntu控制台上想联网但终端文本浏览器似乎不支持页面跳转,既然如此,何不写个客户端呢? ...

  10. Spring BeanUtils的用法

    package test; import java.util.Date; import org.springframework.beans.BeanUtils; import test.basic.B ...