这是一个图片效果，很简单实用，只需要一个"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. 修改cmd的字体

    通常打开的cmd默认的字体比较小,字体只有宋体和新宋体两种,如果要修改,需要通过修改注册表才行. 打开regedit后,找到如下路径HKEY_LOCAL_MACHINE\SOFTWARE\Micros ...

  2. Oracle_表数据拆分与合并

    参考文档: [1]http://blog.itpub.net/8858072/viewspace-426960/ [2]http://blog.csdn.net/mattlinsheep/articl ...

  3. CentOS启动MySQL服务失败

    :: mysqld_safe Starting mysqld daemon with databases from /data/mysql :: [Warning] Can't create test ...

  4. checkbox 与JS的应用

    JS是一种基于(面向)对象的语言.所有的东西都基本上是对象. 基于对象和面向对象概念上基本上没有什么区别. js没有类,它把类功能称为原型对象.是同一个概念.主要是因为js没有class关键字.类== ...

  5. Qt读取JSON和XML数据

    QJSON JSON(JavaScript Object Notation)是一个轻量级的数据交换格式; 可以将数据以name/value的形式任意组合; QJson 是一个基于Qt的库, 将JSON ...

  6. Java和C#中String直接赋值与使用new创建（==与equals进行比较）的区别

    在Java中,字符串可以直接赋值或者使用new来新建,直接赋值的话是编译阶段(.class文件)中就将该字符串值放到常量池中,以后如果有其他变量直接赋予同样的值的话就不再分配内存空间,而是直接给它个引 ...

  7. (原创)初识cordova(一)

    在公司做项目,发现有人在做大项目使用了cordova技术.做的是昆山的项目.之前听说过phonegap,也测试过,但是感觉效率不是很好,就没怎么研究,后来看他们做的项目还不错,于是想试一试. 搭建开发 ...

  8. URL与URI的区别

    URI—Universal Resource Identifier通用资源标志符Web上可用的每种资源如HTML文档.图像.视频片段.程序等都是一个来URI来定位的URI一般由三部组成①访问资源的命名 ...

  9. django: template - built-in tags

    本节介绍模板中的内置标签:if for 承上文,修改 views.py 如下: from django.shortcuts import render_to_response class Person ...

  10. Jquery 使用JSOPN实例

    1.说明 dataType:返回的数据类型 jsonp:传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback:自定义的jsonp ...