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. grafana简介

    grafana一般是和一些时间序列数据库进行配合来展示数据的,例如:Graphite.OpenTSDB.InfluxDB等 grafana是用于可视化大型测量数据的开源程序,他提供了强大和优雅的方式去 ...

  2. 洛谷 P1120 小木棍 [数据加强版]

    P1120 小木棍 [数据加强版] 题目描述 乔治有一些同样长的小木棍,他把这些木棍随意砍成几段,直到每段的长都不超过50. 现在,他想把小木棍拼接成原来的样子,但是却忘记了自己开始时有多少根木棍和它 ...

  3. 一次源码编译PHP折腾记

    前言LINUX环境下编译安装是很折腾人的一件事情,如果没有C/C++功底,碰到编译器报错,肯定要抓狂了 :):),有些软件需要依赖其它库,必须先把依赖库安装好才能进行软件安装.当你学会了编译安装神技之 ...

  4. linux面试之--堆、栈、自由存储区、全局/静态存储区和常量存储区

    栈,就是那些由编译器在须要的时候分配,在不须要的时候自己主动清除的变量的存储区.里面的变量一般是局部变量.函数參数等.在一个进程中.位于用户虚拟地址空间顶部的是用户栈,编译器用它来实现函数的调用.和堆 ...

  5. 腾讯面试题:A.txt和B.txt两个文件,A有1亿个qq号,B有100万个,用代码实现交、并、差

    在STL中关于有序序列有这么四个算法: set_union(beg, end, beg, end2, dest);                    //求并集A∪B set_union(beg, ...

  6. 5分钟快速构建苹果IPA免费发布服务器

    在ios的开发中, 通过苹果的各种秘钥加密, 我们会生成一个.ipa文件,这就是我们的应用软件的安装包. 这个文件是能被安装到iphone/ipad上的.可是,如何才能让不在身边的人安装上这个应用呢? ...

  7. luogu2828 [HEOI2016/TJOI2016]排序

    题目大意 给出一个1到n的全排列,现在对这个全排列序列进行m次局部排序,排序分为两种:(0,l,r)表示将区间[l,r]的数字升序排序:(1,l,r)表示将区间[l,r]的数字降序排序.最后询问第q位 ...

  8. 怎样动态设置GridView的宽和高(Android)

    LinearLayout.LayoutParams linearParams2 = (LinearLayout.LayoutParams)liveGrid.getLayoutParams(); lin ...

  9. 学习笔记二十三——字符函数库cctype【转】

    本文转载自: 字符函数库cctype 在头文件cctype(ctype.h)中定义了一些函数原型,可以简化输入确定字符是否为大写字母.数字.标点符号等工作. 例如: 如果ch是一个字母,则isalph ...

  10. NOI 2009A 诗人小G

    NOI 2009A 诗人小G 诗人小G [问题描述] 小G是一个出色的诗人,经常作诗自娱自乐.但是,他一直被一件事情所困扰,那就是诗的排版问题. 一首诗包含了若干个句子,对于一些连续的短句,可以将它们 ...