<!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. [BZOJ2118] 墨墨的等式（最短路）

    传送门 好神啊.. 需要用非负数个a1,a2,a3...an来凑出B 可以知道,如果一个数x能被凑出来,那么x+a1,x+a2.......x+an也都能被凑出来 那么我们只需要选择a1~an中任意一 ...

  2. Ceph纠删码编码机制

    1 Ceph简述 Ceph是一种性能优越,可靠性和可扩展性良好的统一的分布式云存储系统,提供对象存储.块存储.文件存储三种存储服务.Ceph文件系统中不区分节点中心,在理论上可以实现系统规模的无限扩展 ...

  3. ****如何优雅的用Axure装逼？高保真原型心得分享

    本文核心内容点:- 啥是高保真原型?(附简单说明原型)- Axure可以画出什么水准的高保真?(给示例,开启装逼模式)- 高保真原型图技巧:- 啥时候上高保真?适用场景 and 不适用场景 啥是高保真 ...

  4. [TJOI2019]唱、跳、rap和篮球_生成函数_容斥原理_ntt

    [TJOI2019]唱.跳.rap和篮球 这么多人过没人写题解啊 那我就随便说说了嗷 这题第一步挺套路的,就是题目要求不能存在balabala的时候考虑正难则反,要求必须存在的方案数然后用总数减,往往 ...

  5. Codeforces Round #310 (Div. 2)简洁题解

    A:原来是大水题,我还想去优化.. 结果是abs(num('0')-num('1')); num表示一个符号的个数; B:暴力模拟即可,每次判断是否能构造出答案. C:俄罗斯套娃,套套套,捉鸡的E文. ...

  6. FFT/NTT模板 既 HDU1402 A * B Problem Plus

    @(学习笔记)[FFT, NTT] Problem Description Calculate A * B. Input Each line will contain two integers A a ...

  7. sql 添加自定义排序

    Mysql : SELECT (@i:=@i+1) AS ind ,字段 FROM 表名 别名, (SELECT @i:=0) t WHERE `IsDeleted` = 0; Oracle: 本就有 ...

  8. Setup and Teardown Thread Group in Jmeter

    setup和teardown有点类似于每个测试用例开始和结束时要做的动作 A Thread Group is the starting point of any Jmeter Test Plan. A ...

  9. Hash分析

    分析Hash 列表内容 Hash表中的一些原理/概念,及依据这些原理/概念,自己设计一个用来存放/查找数据的Hash表,而且与JDK中的HashMap类进行比較. 我们分一下七个步骤来进行. Hash ...

  10. LRUCache 具体解释

    LRU的基本概念: LRU是Least Recently Used的缩写,最近最少使用算法. Java 实现LRUCache 1.基于LRU的基本概念,为了达到按最近最少使用排序.能够选择HashMa ...