<!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 4824 [Cqoi2017]老C的键盘 ——树形DP

    每一个限制条件相当于一条有向边, 忽略边的方向,就成了一道裸的树形DP题 同BZOJ3167 唯一的区别就是这个$O(n^3)$能过 #include <map> #include < ...

  2. angularjs bootstrap 简介

    1.angular特色 数据双向绑定 模块化  var myapp=angular.module... 控制器  myapp.controller(){} 2.bootstrap特色 栅格结构  cs ...

  3. 线程池的使用。好文。mark【http://blog.csdn.net/rwecho/article/details/21157289】

    介绍new Thread的弊端及Java四种线程池的使用,对Android同样适用.本文是基础篇,后面会分享下线程池一些高级功能. 1.new Thread的弊端执行一个异步任务你还只是如下new T ...

  4. go初识

    for循环 ; i < ; i++ { fmt.Println(i*i) } ls := "agd" for _, arg := range ls{ fmt.Println( ...

  5. 模拟用户登录-SpringMVC+Spring+Mybatis整合小案例

    1. 导入相关jar包 ant-1.9.6.jarant-launcher-1.9.6.jaraopalliance.jarasm-5.1.jarasm-5.2.jaraspectj-weaver.j ...

  6. java 基础 5 String StringBuffer StringBuilder

    String是不可变的,原因 1是可以缓存hash值,因为String的hash值经常被使用,例如String用作HashMap等.不可变特性  使得hash值不变,因此只需要进行一次计算: 2Str ...

  7. windows 80端口占用情况查询

    在开始-运行,输入CMD打开命令行界面,输入命令 netstat -ano | findstr "80" (注80是你想要看查看的端口号) 就会输出包含80端口使用的情况 具体对应 ...

  8. Andriod DiskLruCache的使用案例

    DiskLruCache是谷歌推荐的用来实现硬盘缓存的类,本案例将对DiskLruCache的基本用法做一个总结,包括:创建缓存.查找使用缓存.移除缓存等等. 实现效果图 创建DiskLruCache ...

  9. 几种自己主动运行js代码的方式

    近期在看jquery,发现他竟然能自己主动运行js代码,于是就查了下.收集了几种经常使用的实现方法 jquery的方法 使用场景:不论什么须要运行的js特效 $(document).ready(fun ...

  10. Yii框架中安装srbac扩展方法

    首先,下载srbac_1.3beta.zip文件和对应的blog-srbac_1.2_r228.zip 问什么要下载第二个文件,后面就知道了. 按照手册进行配置: 解压缩srbac_1.3beta.z ...