html 图片翻转
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 图片翻转的更多相关文章
- CSS3图片翻转切换案例及其中重要属性解析
图片翻转切换,在不使用CSS3的情况下,一般都是使用JS实现动画,同时操作元素的width和left,或者height和top以模拟翻转的效果,并在适当时候改变src或者z-index实现图片切换. ...
- 自己积累的一些Emgu CV代码(主要有图片格式转换,图片裁剪,图片翻转,图片旋转和图片平移等功能)
using System; using System.Drawing; using Emgu.CV; using Emgu.CV.CvEnum; using Emgu.CV.Structure; na ...
- gl.TexSubImage2D 使用遇到图片翻转的问题
这2天在用gl.TexSubImage2D把几张小图转拼接成大图,如果在渲染物体之前拼接好就没有问题,但在开始渲染物体后拼接就会有问题.后来我做了2件事情来找原因, 1. 用拼好的图来画一个正方形,大 ...
- JavaScript图片翻转
<script type="text/javascript"> /** * 注册函数f,当文档加载问成时执行这个函数f * 如果文件已经载入完成,尽快以异步方式执行它 ...
- CSS图片翻转动画技术详解
因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...
- CSS3图片翻转动画技术详解
CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...
- div 中图片溢出问题及 CSS3中图片翻转问题
如果设置一个div 装两张以上的图片,如果不设置好div的宽度和高度,就会使图片溢出. 我们知道,div是可以由图片撑开其宽高的,也就是说如果只放一张图片的情况下,不设置div的宽高,div的宽高会默 ...
- Javascript实现图片翻转
使用Js的对象属性能实现简单的翻转效果.通过onMouseover事件和onMouseOut事件就能实现鼠标移到链接上和移开链接发生反应.给两个图片加上链接实现都能翻转的效果. reverse.htm ...
- 【应用】图片翻转js
图片翻转:图片随着鼠标指针划过进行替换 <img src="example.gif" onmouseover="this.src='exampleTwo.gif'& ...
- 原生js如何实现图片翻转旋转效果?
原生js如何实现图片翻转旋转效果? 一.总结 1.通过给元素设置style中的transition来实现的. 2.我昨天纠结的效果全部可以通过精读这个代码后实现. 二.原生js如何实现图片翻转旋转效果 ...
随机推荐
- Java基础学习总结(69)——匿名内部类与Lambda表达式
前言 Java Labmda表达式的一个重要用法是简化某些匿名内部类(Anonymous Classes)的写法.实际上Lambda表达式并不仅仅是匿名内部类的语法糖,JVM内部是通过invokedy ...
- Grails用CONSOLE测试,比写集成测试还快
一般,这个可以用过开发当中的脚本测试吧. 如果正规的开发流程里,集成测试显然可以作为报告提交,必不可少.
- pyenv-virtualenv环境搭建
搞了个新服务器,搭个python环境 安装pyenv 直接上懒人脚本,不怕麻烦想手动装的就麻烦您自己查吧~ curl -L https://raw.githubusercontent.com/yyuu ...
- LINUX 内核内存管理
https://linux-mm.org/ http://www.cnblogs.com/liloke/archive/2011/11/20/2255737.html
- [转]数据库查询 sysobjects
sysobjects sysobjects是系统自建的表,里面存储了在数据库内创建的每个对象(约束.默认值.日志.规则.存储过程等),各在表中占一行.只有在 tempdb 内,每个临时对象才在该表中占 ...
- 关于Openstack的浅层次认知
Openstack浅析 英文好的应该直接跳到官方文档去看相关的介绍,以下是具体介绍的连接,包含Openstack的具体架构: http://docs.openstack.org/kilo/instal ...
- HDU 5435
数位DP题,然而不会做.设dp[i][j]表示前i位异或和为j的时候的个数.先dp出所有的可能组合使得异或和为j的个数,然后按位进行枚举.对于dp[i][j],其实不止是前i位,对于后i位的情况同样适 ...
- POJ 3653 & ZOJ 2935 & HDU 2722 Here We Go(relians) Again(最短路dijstra)
题目链接: PKU:http://poj.org/problem? id=3653 ZJU:problemId=1934" target="_blank">http ...
- 【POJ 1964】 City Game
[题目链接] http://poj.org/problem?id=1964 [算法] 记f[i]表示第i行最多向上延伸的行数 然后,对于每一行,我们用单调栈计算出这一行向上延伸的最大矩形面积,取最大值 ...
- IJ-Error:常见错误
ylbtech-IJ-Error:常见错误 1.返回顶部 1. This application has no explicit mapping for /error, so you are seei ...