<!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. BZOJ 1426 收集邮票 ——概率DP

    $f(i)$表示现在有$i$张,买到$n$张的期望 所以$f(i)=f(i+1)+\frac {n}{n-i}$ 费用提前计算,每张邮票看做一元,然后使后面每一张加1元 $g(i)$表示当前为$i$张 ...

  2. 洛谷P3760 - [TJOI2017]异或和

    Portal Description 给出一个\(n(n\leq10^5)\)的序列\(\{a_n\}(\Sigma a_i\leq10^6)\),求该数列所有连续和的异或和. Solution 线段 ...

  3. ngrinder的idea脚本开发环境配置

    1.安装toriseSvn,安装一定要选择comandline (默认是没选择的) 2.下载groovy,解压缩,在开发工具(ps:idea,eclipse)中设置groovy安装路径 3.在网站处创 ...

  4. Vxlan简介

    1.为什么需要Vxlan 1.什么是VXLAN VXLAN(Virtual eXtensible LAN可扩展虚拟局域网),是一种mac in UDP技术.传统的二层帧被封装到了UDP的报文中,通过U ...

  5. Codeforces Round #287 (Div. 2) D. The Maths Lecture [数位dp]

    传送门 D. The Maths Lecture time limit per test 1 second memory limit per test 256 megabytes input stan ...

  6. Bayan 2015 Contest Warm Up D. CGCDSSQ （math，pair，map，暴力）

    哎,只能转题解了,,, 8165031                 2014-10-10 15:53:42     njczy2010     D - CGCDSSQ             GN ...

  7. ［转发］Android 系统稳定性 - ANR（一）

    文章都为原创,转载请注明出处,未经允许而盗用者追究法律责任.很久之前写的了,留着有点浪费,共享之.编写者:李文栋  http://rayleeya.iteye.com/blog/1955652 如果你 ...

  8. Maven单元测试

    // SKU码:系列前3位+6位年月日+3位序号(自动生产,取数据库中当天最大的,没有就赋值位001) // 订单编号:BRD+6位年月日+5位序号 // // 退单号:BRT+6位年月日+3位序号 ...

  9. docker-清理none镜像等操作

    有时候由于调试代码产生很多的none的image,挨个清理会有些麻烦,从网上找到的命令 // 停止所有容器 docker ps -a | grep "Exited" | awk ' ...

  10. ORA-01940: cannot drop a user that is currently connected 问题解析

    https://www.linuxidc.com/Linux/2012-12/76448.htm