<!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. cf487C Prefix Product Sequence

    Consider a sequence [a1, a2, ... , an]. Define its prefix product sequence . Now given n, find a per ...

  2. Numpy 花式索引

    记住:花式索引跟切片不一样,它总是将数据复制到新数组中. 一 给定一个列表,返回索引为1,3,4,5,6的数组 2 针对二维数组 需要注意的一点是,对于花式索引.对照下后面的两种方式,查询结果的不同.

  3. C# 实现刻录光盘功能

    最近公司提出一个需求,要把公司系统的图像刻录成光盘(公司系统是医院放射科系统,很多放射科的图像) 查看了很多资料发现有两个比较可靠 1:使用IMAPI2,进行文件的光盘刻录,具体实例可以参照以下链接: ...

  4. Spring boot 中 Spring Security 使用改造5部曲(转)

    文章的内容有点长,也是自己学习Spring security的一个总结.如果你从头看到尾,我想你对Spring Security的使用和基本原理应该会有一个比较清晰的认识. 如果有什么理解不对的地方, ...

  5. 线段树练习5（codevs 4927）

    题目描述 Description 有n个数和5种操作 add a b c:把区间[a,b]内的所有数都增加c set a b c:把区间[a,b]内的所有数都设为c sum a b:查询区间[a,b] ...

  6. C#.net的常用函数列表

    原文发布时间为:2008-08-03 -- 来源于本人的百度文章 [由搬家工具导入] 1、DateTime 数字型 System.DateTime currentTime=new System.Dat ...

  7. 改变input的value值，同时在HTML中将value进行改变

    在使用lodop进行打印的时候,需求中有这样一个功能:某个字段可以在页面的input框中进行修改. 但是在进行打印时调用的是静态的HTML代码,这就导致在页面的input框中改变字段之后,但是HTML ...

  8. 说说icon图标

    咳咳,其实我是想copy过来的,然而,他竟然是用代码写的图标... (正经脸)话说icon图标是一种网页中常用图标的一种,网络上有各式各样的应用案例,在此就不多啰嗦了.其实我也不过是用着现成的而已,所 ...

  9. jquery实现表单验证，所以的验证通过后方可提交

    <html>     <head>         <meta http-equiv="content-type" content="tex ...

  10. hdu1569 方格取数 求最大点权独立集

    题意:一个方格n*m,取出一些点,要求两两不相邻,求最大和.思路:建图,相邻的点有一条边,则建立了一个二分图,求最大点权独立集(所取点两两无公共边,权值和最大),问题转化为求总权和-最小点权覆盖集(点 ...