这是一个图片效果，很简单实用，只需要一个"rotate3Di.js"的插件就行，

关于rotate的用法有如下几种：

$(选择器).rotate3Di(30); //把图片3D旋转30度

$(选择器).rotate3Di(180, 1000);//经过1s把图片3D顺时针旋转180度

$(选择器).rotate3Di('-=180', 1000);//每过1s把图片3D逆时针旋转180度

$(选择器).rotate3Di('flip', 1000);//经过1s把图片逆时针旋转180度

$(选择器).rotate3Di('unflip', 1000);//与'flip'连用

$(this).rotate3Di('toggle', 1000);//相当于'flip'和'unflip'连用

等

下面是一段鼠标移过时和移走时图片3D旋转的一段代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>
<div class="iii" style="width:500px;height:400px;background:red;" class="iii">
<img src="data:images/0.jpg" name="imge1" class="ii" alt="" />
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="rotate3Di.js"></script>
<script type="text/javascript">
$(".iii").mouseover(function(){
$(".ii").stop().rotate3Di(180,1000);
});
$(".iii").mouseout(function(){
$(".ii").stop().rotate3Di(0,1000);
});
</script>
</body>
</html>

jquery图片3D旋绕效果 rotate3Di的操作的更多相关文章

  1. jQuery图片旋转展示收缩效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jquery图片懒加载效果

    1.要引入jquery 2.要引入underscore.js <!DOCTYPE html> <html lang="en"> <head> & ...

  3. JQuery图片轮播滚动效果(网页效果--每日一更)

    今天,带来的是一个图片的轮播滚动效果! 先来看一下效果展示:亲,请点击这里 原理很简单,设置一个定时器,使图片列表在每隔一段时间后滚动一次.而循环效果,就是在每一滚动的时候,将第一张图片放到最后一张的 ...

  4. 利用纯CSS3实现超立体的3D图片侧翻倾斜效果

    原文:利用纯CSS3实现超立体的3D图片侧翻倾斜效果 上午的时候我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是 ...

  5. 10款好用的 jQuery 图片切换效果插件

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...

  6. 扑面而来的碎片--图片3D炸裂效果初体验

    之前逛园子的时候看到 ChokCoco 的爆炸效果作品:[BOOM]一款有趣的Javascript动画效果 (大神英文有没有拼错呀←.←),觉得蛮有意思的,效果如下: 不过觉得这个爆炸效果还是偏软了一 ...

  7. JQuery图片切换动画效果

    由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换. 思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很 ...

  8. CSS3之图片3D翻转效果(网页效果--每日一更)

    今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:亲,请点击这里 这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animatio ...

  9. jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

    jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...

随机推荐

  1. appium新版本不支持findElementByName，切换到findElementByAndroidUIAutomator

    appium 1.7.6 不支持findElementByName(locator)  不知道为什么? 脚本中许多这样的语句,麻烦事情多了 org.openqa.selenium.InvalidSel ...

  2. Android笔记（一）：从this关键字发散

    this指的是直接包含它的类的实例. 例如: public class MyClass{ int num; public MyClass(int num){ this.num = num; } } 这 ...

  3. angularJS怎么实现与服务端的PHP进行数据交互

    //{params: 要传的参数obj },params这个是关键字不能换别的变量 $http.get(url, {params: {id: categoryid, key: keys} }).suc ...

  4. P2P/WSN信任建模与仿真平台

    1.ART Testbed 该平台是基于多代理的信任仿真平台,官网的介绍如下: The Agent Reputation and Trust (ART) Testbed initiative has ...

  5. ZigBee心电传输（三）

    这段时间因为另外一个项目需要,我搞Zed板去了.现在接着上一步的工作吧,继续把心电做完.这里想要测试一下把心电波形数据传输出来,然后用协调器接收,并从串口显示出来.之后再用ZigBee转蓝牙,从而可以 ...

  6. Nicholas C. Zakas（JS圣经：JavaScript高级程序设计作者）如何面试前端工程师

    Original Post:Interviewing the front-end engineerNicholas C. Zakas,2010年1月5日翻译完成:2010年1月7日,最后更新:2010 ...

  7. CAsyncSocket

    本词条缺少名片图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! 它是一个异步非阻塞Socket封装类,CAsyncSocket::Create()有一个参数指明了你想要处理哪些Socket事 ...

  8. [转］getResource()和getResourceAsStream以及路径问题

    原文链接:http://blog.sina.com.cn/s/blog_4b5bc0110100g22w.html 用JAVA获取文件,听似简单,但对于很多像我这样的新人来说,还是掌握颇浅,用起来感觉 ...

  9. CentOS NFS的安装配置、启动及mount挂载方法

    一.环境介绍: 服务器:centos 192.168.1.225 客户端:centos 192.168.1.226 二.安装: NFS的安装配置:centos 5 : yum -y install n ...

  10. 2:url有规律的多页面爬取

    举例网站:http://www.luoo.net/music/期刊号 e.g:http://www.luoo.net/music/760 打算爬取其title:Hello World:pic:desc ...