这是一个图片效果，很简单实用，只需要一个"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. 【更新日志】售后CP更新日志

    记录一下: [售后CP更新日志] ============================================ 更新时间:[-- :] 更新内容: .版本升级,框架升级,框架升级版本3. ...

  2. android之字体阴影效果

    今天刚刚好做了个字体阴影的效果,感觉加上了阴影的效果立体感十足啊!写了个简单的demo与大家分享下!主要是以下四个属性 android:shadowColor  阴影的颜色  android:shad ...

  3. javascript--瀑布流

    简单瀑布流代码实现 html代码例如以下 <!DOCTYPE html> <html> <head> <meta http-equiv="Conte ...

  4. WebMagic的设计参考了业界最优秀的爬虫Scrapy

    http://webmagic.io/docs/zh/posts/ch1-overview/thinking.html https://github.com/psvehla/liferay-sprin ...

  5. [Docker] Install Docker on Windows (hp) and start with Kitematic

    Well, on Windows costs a little bit effort to run docker. 1. You need to enable Virtulization: Oh hp ...

  6. [Angular 2] Simple intro Http

    To use http, we need to import the HTTP_PROVIDER, so that we can inject http to other component: imp ...

  7. Python顺序与range和random

    range([start,] stop[, step]) start是开始,stop是停下,step是步长. >>> range(10) range(0, 10) >>& ...

  8. 如何查看Android SDK源码版本

    PLATFORM_VERSION := 4.2.2 位于/build/core/version_defaults.mk # # Copyright (C) 2008 The Android Open  ...

  9. apt-get install jdk

    怕忘记,记录下: sudo apt-get install python-software-properties sudo add-apt-repository ppa:webupd8team/jav ...

  10. 武汉科技大学ACM ：1003: 零起点学算法67——统计字母数字等个数

    Problem Description 输入一串字符,统计这串字符里的字母个数,数字个数,空格字数以及其他字符(最多不超过100个字符) Input 多组测试数据,每行一组 Output 每组输出一行 ...