<!DOCTYPE html>

<html>

        <head>

                <title></title>

                <meta charset='utf-8' />

                <script src='js/jquery.js'></script>

                <style>

                        .pic{

                            width: 120px;

                            height: 180px;

                            margin: 150px auto 0;

                            position: relative;

                            /*transform 旋转元素*/

                            transform-style:preserve-3d;

                            transform:perspective(800px) rotateX(-10deg) rotateY(0deg);

                        }

                        .pic img{

                            position: absolute;

                            width: 100%;

                            height: 100%;

                            border-radius: 5px;

                            box-shadow: 0px 0px 10px #fff;

                            /*倒影的设置*/

                            -webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,.5) 100%);

                        }

                        .pic p{

                            width: 1200px;

                            height: 1200px;

                            background: -webkit-radial-gradient(center center,600px 600px,rgba(255,255,255,.5),rgba(0,0,0,0));

                            position: absolute;

                            top:100%;left:50%;

                            margin-top: -600px;

                            margin-left: -600px;

                            border-radius:600px;

                            transform:rotateX(90deg);

                        }

                </style>

        </head>

        <body>

                <div class='box'>

                        <div class="pic">

                                <img src="data:image/1.jpg" />

                                <img src="data:image/2.jpg" />

                                <img src="data:image/3.jpg" />

                                <img src="data:image/4.jpg" />

                                <img src="data:image/5.jpg" />

                                <img src="data:image/6.jpg" />

                                <img src="data:image/7.jpg" />

                                <img src="data:image/8.jpg" />

                                <img src="data:image/9.jpg" />

                                <img src="data:image/10.jpg" />

                                <p></p>

                        </div>

                </div>

                <script>

                        $(function () {

                            var imgL = $(".pic img").size();

                            var deg = 360 / imgL;

                            var roY = 0, roX = -10;

                            var xN = 0, yN = 0;

                                    var play = null;

                                    $ (".pic  img").each(function(i){

                            $(this).css({

                            "transform":"rotateY( " + i * deg + "deg) translateZ(200px)" });

                                    $(this).attr('ondragstart', 'return false');

                        });

                        $(document).mousedown(function (ev) {

                            var x_ = ev.clientX;

                            var y_ = ev.clientY;

                            clearInterval(play);

                            console.log('我按下了');

                            $(this).bind('mousemove', function (ev) {

                                /*获取当前鼠标的坐标*/

                                var x = ev.clientX;

                                var y = ev.clientY;

                                /*两次坐标之间的距离*/

                                xN = x - x_;

                                yN = y - y_;

                                roY += xN * 0.2;

                                roX -= yN * 0.1;

                                console.log('移动');

                                $('.pic').css({

                                    transform: 'perspective(800px) rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)'

                                });

                                /*之前的鼠标坐标*/

                                x_ = ev.clientX;

                                y_ = ev.clientY;

                            });

                        }).mouseup(function () {

                            $(this).unbind('mousemove');

                            var play = setInterval(function () {

                                xN *= 0.95;

                                yN *= 0.95;

                                if (Math.abs(xN) < 1 && Math.abs(yN) < 1) {

                                    clearInterval(play);

                                }

                                roY += xN * 0.2;

                                roX -= yN * 0.1;

                                $('.pic').css({

                                    transform: 'perspective(800px) rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)'

                                });

                            }, 30);

                        });

                 });

                </script>

        </body>

</html>

原文出处：http://www.htmleaf.com/jQuery/list_1_5.html

　　

jquery和CSS3带倒影的3D万花筒旋转动画特效效果演示的更多相关文章

  1. jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件

    插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...

  2. HTML5 3D 粒子波浪动画特效DEMO演示

    需要thress.js插件:     http://github.com/mrdoob/three.js // three.js - http://github.com/mrdoob/three.js ...

  3. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  4. jQuery可拖拽3D万花筒旋转特效

    这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...

  5. CSS3实现3D木块旋转动画

    CSS3实现3D木块旋转动画,css3特效,旋转动画,3D,立体效果,CSS3实现3D木块旋转动画是一款迷人的HTML5+CSS3实现的3D旋转动画. 代码下载:http://www.huiyi8.c ...

  6. 基于jQuery和CSS3炫酷图片3D旋转幻灯片特效

    在线预览   源码下载 iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件.你可以使用它来制作产品展示.图片画廊或者各种幻灯片和轮播图特效.这款幻灯片插件的特点有: ...

  7. CSS3带你实现3D转换效果

    前言 在css3中允许使用3D转换来对元素进行格式化,在原本只是2D转化的平面中引入了Z轴.在这之前我们讲解了css3中的2D转换,也就是二维空间变换,本篇的3D转换就是基于原来的2D转换而来,与2D ...

  8. 9种jQuery和css3图片动画特效代码演示

    1.自由旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载 ...

  9. 使用jQuery和CSS3生成的搜索框变形全屏搜索效果

    在线演示 本地下载 使用jQuery和CSS3过渡变形效果生成的一个搜索框变形效果实现,可以帮助你更好利用页面格式和内容.实验性质的代码,请大家在产品环境里自己修改使用!

随机推荐

  1. Numpy 布尔型数组

    一  给定一个列表,返回大于10的元素. 在python中,有两种方法.一种方法是循环遍历,第二种方法是使用内置函数filter() 在数组中,有更为简单的方法.即布尔型索引 布尔型索引: 将同样大小 ...

  2. css-包含块

    在CSS中,有事一个元素的位置和尺寸的计算都相对于一个矩形,这个矩形被称作包含块.包含块是一个相对的概念,比如 子元素的初始化布局总是在父元素的左上角,这就是一个相对的概念.其中父元素就是一个参照物, ...

  3. pl/sql小技巧

    更正方法: 然后把Automatic statistics的勾选去掉,点击apply即可

  4. AC日记——[USACO1.1]坏掉的项链Broken Necklace 洛谷 P1203

    题目描述 你有一条由N个红色的,白色的,或蓝色的珠子组成的项链(3<=N<=350),珠子是随意安排的. 这里是 n=29 的二个例子: 第一和第二个珠子在图片中已经被作记号. 图片 A ...

  5. AIO

    IBM® 市场 (英文) 提交   我的 IBM 站点导航   学习 开发 社区 学习 Java technology 内容   概览 简单介绍 Asynchronous I/O 开始简单的异步 I/ ...

  6. Java运算基础

    计算机对负数的运算 =  先取绝对值的原码----> 然后取反,----->+1   这是负数的补码表示 例如  -5       5的原码= 0000,0101  取反   1111,1 ...

  7. linux下eth0 lo wlan0

    参考:http://www.cnblogs.com/see7di/archive/2011/06/17/2239722.html 内容如下: 理解linux下的 eth0,eth1,eth2,lo 网 ...

  8. 多个Nginx如何实现集群（没具体方案，只是初步探究）

    场景: Nginx+Web服务器可以实现负载均衡,但是一台Nginx也是有限的,如果并非量高的话,在他的上层如何实现负载均衡. 如果是DNS或者CDN的话,建多个机房,势必有多个机房数据同步的问题. ...

  9. 深入GCD（三）: Dispatch Sources

    何为Dispatch Sources简单来说,dispatch source是一个监视某些类型事件的对象.当这些事件发生时,它自动将一个block放入一个dispatch queue的执行例程中.说的 ...

  10. Android新技术学习——阿里巴巴免Root无侵入AOP框架Dexposed

    阿里巴巴无线事业部近期开源的Android平台下的无侵入运行期AOP框架Dexposed,该框架基于AOP思想,支持经典的AOP使用场景.可应用于日志记录,性能统计,安全控制.事务处理.异常处理等方面 ...