1. var Lb = false; var Ub = false;
  2. function rotate(obj) {
  3. if (obj == "L") {
  4.  
  5. if (Lb == false) { //第一次
  6. document.getElementById("img1").classList.add("flipx");
  7. } else {
  8. document.getElementById("img1").classList.remove("flipx");
  9. }
  10. Lb = !Lb;
  11. }
  12. if (obj == "U") {
  13.  
  14. if (Ub == false) { //第一次
  15. document.getElementById("img1").classList.add("flipy");
  16. } else {
  17. document.getElementById("img1").classList.remove("flipy");
  18. }
  19. Ub = !Ub;
  20. }
  21. }
  1. /*水平翻转*/
  2. .flipx {
  3. -moz-transform: scaleX(-);
  4. -webkit-transform: scaleX(-);
  5. -o-transform: scaleX(-);
  6. transform: scaleX(-);
  7. /*IE*/
  8. filter: FlipH;
  9. }
  10.  
  11. /*垂直翻转*/
  12. .flipy {
  13. -moz-transform: scaleY(-);
  14. -webkit-transform: scaleY(-);
  15. -o-transform: scaleY(-);
  16. transform: scaleY(-);
  17. /*IE*/
  18. filter: FlipV;
  19. }

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. everyday two problems / 3.1

    T1.string 题意: 给定由小写字母组成的长度为 n 的字符串 将其所有 n * (n + 1) / 2 个子串按字典序排序 输出第 k 个子串 k > (n * (n + 1) / 2) ...

  2. 对SHH的公钥和私钥的简单理解

    SSH是在应用层和传输层基础上的安全协议 SSH提供了两种级别的安全验证: 第一基于密码的安全验证:账号.密码,但可能有别的服务器冒充真正的服务器,无法避免被“中间人”攻击(man-in-the-mi ...

  3. 2.3. Configuring sudo Access-RedHat

    https://access.redhat.com/documentation/en-US/Red_Hat_Enterprise_Linux_OpenStack_Platform/2/html/Get ...

  4. RDS for MySQL Mysqldump 常见问题和处理

    https://help.aliyun.com/knowledge_detail/41732.html?spm=5176.7841698.2.13.u67H3h

  5. imu 和 private redo

    在传统的undo管理模式中,Oracle对undo和data block是一视同仁.这样大致会有三种弊端: 1)事务开始时,存放事务表的段头不在内存,server process需要将此i/o上来 2 ...

  6. pthread_rwlock pthread读写锁

    原文: http://www.cnblogs.com/diegodu/p/3890450.html 使用读写锁 配置读写锁的属性之后,即可初始化读写锁.以下函数用于初始化或销毁读写锁.锁定或解除锁定读 ...

  7. songtzu的创业产品的经历

    我的产品是关于卡通头像的东东,也有点照片处理app的感觉.你可能会想到脸萌.或者足迹.可是.我自觉得,我比这两者想做的东西要好. 以下的两张是站点首页的效果图. 图片版权与肖像权全部,非授权不得使用. ...

  8. 鸟哥的Linux私房菜-----8、文件系统的装载

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGVrZXdhbmd6aQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  9. IntelliJ IDEA 问题总结之二(待补充) —— 快捷键、主题样式、导出jar、sqlite

    随着对idea的使用,问题越来越多,開始第二篇问题总结. 1.快捷键. 用惯了eclipse再用idea后,快捷键就是一个大问题. 并且网上idea的快捷键有非常多版本号.不知道是不是老版本号和新版本 ...

  10. 超简洁代码实现CircleImageView

    效果图: 页面代码: public class CircleView extends ImageView { private Paint mPaint = new Paint(); public Ci ...