var Lb = false; var Ub = false;
function rotate(obj) {
if (obj == "L") { if (Lb == false) { //第一次
document.getElementById("img1").classList.add("flipx");
} else {
document.getElementById("img1").classList.remove("flipx");
}
Lb = !Lb;
}
if (obj == "U") { if (Ub == false) { //第一次
document.getElementById("img1").classList.add("flipy");
} else {
document.getElementById("img1").classList.remove("flipy");
}
Ub = !Ub;
}
}
   /*水平翻转*/
.flipx {
-moz-transform: scaleX(-);
-webkit-transform: scaleX(-);
-o-transform: scaleX(-);
transform: scaleX(-);
/*IE*/
filter: FlipH;
} /*垂直翻转*/
.flipy {
-moz-transform: scaleY(-);
-webkit-transform: scaleY(-);
-o-transform: scaleY(-);
transform: scaleY(-);
/*IE*/
filter: FlipV;
}

html 图片翻转的更多相关文章

  1. CSS3图片翻转切换案例及其中重要属性解析

    图片翻转切换,在不使用CSS3的情况下,一般都是使用JS实现动画,同时操作元素的width和left,或者height和top以模拟翻转的效果,并在适当时候改变src或者z-index实现图片切换. ...

  2. 自己积累的一些Emgu CV代码(主要有图片格式转换,图片裁剪,图片翻转,图片旋转和图片平移等功能)

    using System; using System.Drawing; using Emgu.CV; using Emgu.CV.CvEnum; using Emgu.CV.Structure; na ...

  3. gl.TexSubImage2D 使用遇到图片翻转的问题

    这2天在用gl.TexSubImage2D把几张小图转拼接成大图,如果在渲染物体之前拼接好就没有问题,但在开始渲染物体后拼接就会有问题.后来我做了2件事情来找原因, 1. 用拼好的图来画一个正方形,大 ...

  4. JavaScript图片翻转

    <script type="text/javascript"> /** * 注册函数f,当文档加载问成时执行这个函数f * 如果文件已经载入完成,尽快以异步方式执行它 ...

  5. CSS图片翻转动画技术详解

    因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...

  6. CSS3图片翻转动画技术详解

    CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...

  7. div 中图片溢出问题及 CSS3中图片翻转问题

    如果设置一个div 装两张以上的图片,如果不设置好div的宽度和高度,就会使图片溢出. 我们知道,div是可以由图片撑开其宽高的,也就是说如果只放一张图片的情况下,不设置div的宽高,div的宽高会默 ...

  8. Javascript实现图片翻转

    使用Js的对象属性能实现简单的翻转效果.通过onMouseover事件和onMouseOut事件就能实现鼠标移到链接上和移开链接发生反应.给两个图片加上链接实现都能翻转的效果. reverse.htm ...

  9. 【应用】图片翻转js

    图片翻转:图片随着鼠标指针划过进行替换 <img src="example.gif" onmouseover="this.src='exampleTwo.gif'& ...

  10. 原生js如何实现图片翻转旋转效果?

    原生js如何实现图片翻转旋转效果? 一.总结 1.通过给元素设置style中的transition来实现的. 2.我昨天纠结的效果全部可以通过精读这个代码后实现. 二.原生js如何实现图片翻转旋转效果 ...

随机推荐

  1. 清北学堂模拟赛d1t6 或和异或(xor)

    题目描述 LYK最近在研究位运算,它研究的主要有两个:or和xor.(C语言中对于|和^) 为了更好的了解这两个运算符,LYK找来了一个2^n长度的数组.它第一次先对所有相邻两个数执行or操作,得到一 ...

  2. LightOJ 1370 Bi-shoe and Phi-shoe

    /* LightOJ 1370 Bi-shoe and Phi-shoe http://lightoj.com/login_main.php?url=volume_showproblem.php?pr ...

  3. 用sqlldr导入csv文件

    1.新建文件test.ctl,内容如下 load dataCHARACTERSET 'UTF16' \*指定编码格式,很重要*\ infile 'vodall.csv' append into tab ...

  4. nyoj_19_擅长排列的小明_201403011600

    擅长排列的小明时间限制:1000 ms  |  内存限制:65535 KB 难度:4描述 小明十分聪明,而且十分擅长排列计算.比如给小明一个数字5,他能立刻给出1-5按字典序的全排列,如果你想为难他, ...

  5. JS 缓冲运动 带运动的留言本 小案例

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  6. Android面试准备 第一天 第2-4例

    參考:http://blog.csdn.net/lmj623565791/article/details/24015867. .假设有个100M大的文件.须要上传至server中.而serverfor ...

  7. 跨平台C++开源码的两种经常使用编译方式

    作者:朱金灿 来源:http://blog.csdn.net/clever101 跨平台C++开源代码为适应各种编译器的编译,採用了两种方式方面来适配.一种是makefile方式.以著名的空间数据格式 ...

  8. 关于Android开发数据存储的方式(一)

    关于Android开发数据存储方式(一) 在厦门做Android开发也有两个月了,快情人节了.我还在弄代码. 在微信平台上开发自己的APP,用到了数据存储的知识,如今总结一下: 整体的来讲.数据存储方 ...

  9. ubuntu系统启动qtceator时提示:Qt5.5.1/Tools/QtCreator/lib/qtcreator/plugins/libHelp.so: 无法加载库

    在ubuntu系统下安装好qt5.5后启动qtceator时提示:Qt5.5.1/Tools/QtCreator/lib/qtcreator/plugins/libHelp.so: 无法加载库Qt5. ...

  10. DirectFB学习之移植到nuc972平台 标签: DirectFBlinux图形加速驱动【转】

    本文转载自:http://blog.csdn.net/jxgz_leo/article/details/70137304 [nuc972开发板购买地址,感谢支持](https://shop102749 ...