<!DOCTYPE html>

<html onselectstart="return false">

<!-- onselectstart="return false" 禁止页面复制-->

<head lang="en">

    /*onselectstart="return false"*/

    <meta charset="UTF-8">

    <title>document</title>

    <!--一共用的就是40到50个单词记住即可-->

    <!-- div.pic 是创建一个盒子-->

    <style>

        *{

            margin: ;

            padding: ;

        }

        body{

            background-color: #;

        }

        div.pic{

            width: 120px;

            height: 180px; /* 133:200  约等于 4:6  */

            /*border: 1px dotted #f00;*/

            margin: 200px auto ;/*上---左右---下 */

            position: relative;

            transform-style: preserve-3d;

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

        }

        div.pic img{

            position: absolute;

            width: %;

            height: %;

            border-radius: 5px; /*加上圆角*/

            box-shadow: 0px 0px 10px #fff;/*box-shadow 属性向框添加一个或多个阴影*/

            -webkit-box-reflect: below 10px -webkit-linear-gradient(top,rgba(,,,) %,rgba(,,,0.5) %); /*box-reflect倒影属性练习*/

            /*-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,1) , 这是一个渐变*/

        }

        div.pic p{

            width: 1200px;

            height: 1200px;

            background: -webkit-radial-gradient(center center,600px 600px,rgba(,,,0.3),rgba(,,,));

            left: %;top: %;

            margin-top: -50px;

            margin-left: -600px;

            transform: rotateX(90deg);

            border-radius: 600px;

        }

    </style>

</head>

<body>

    <!--div 长方型的区域-->

    <div class="pic">

        <img src="img/1.jpg" alt="1.jpg"/>

        <img src="img/2.jpg" alt="2.jpg"/>

        <img src="img/3.jpg" alt="3.jpg"/>

        <img src="img/4.jpg" alt="4.jpg"/>

        <img src="img/5.jpg" alt="5.jpg"/>

        <img src="img/6.jpg" alt="6.jpg"/>

        <img src="img/7.jpg" alt="7.jpg"/>

        <img src="img/8.jpg" alt="8.jpg"/>

        <img src="img/9.jpg" alt="9.jpg"/>

        <img src="img/10.jpg" alt="10.jpg"/>

        <img src="img/11.jpg" alt="11.jpg"/>

        <p></p>

    </div>

    <script src="js/jquery-2.1.1.min.js"></script>

    <script>

        $(function(){

            //设定初始变化值

            var translate=;

            //文档添加鼠标滚轮事件，demo没写兼容，不支持火狐

            document.addEventListener("mousewheel",function(e){  //缩放

                var distance= //每次滚轮缩放变化值

                if(e.wheelDelta>){      //方向

                   clearInterval(play)

                   translate+=distance    //perspective值变化

                   $("div.pic").css({

                            transform:'perspective('+translate+'px) rotateX('+toX+'deg)  rotateY('+toY+'deg)'

                   });  //css3变化

                }else if(e.wheelDelta<){

                    clearInterval(play)

                   translate-=distance

                   $("div.pic").css({

                            transform:'perspective('+translate+'px) rotateX('+toX+'deg)  rotateY('+toY+'deg)'

                   });

                }

            })

            var imgL = $("div.pic img").size();  //img数量

//            alert(imgL);

            var deg =  / imgL;   //角度

            var toY = , toX = -;

            var xN = ,yN = ;

            var play = null;

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

                $(this).css({

                    'transform':'rotateY('+i*deg+'deg) translateZ(350px)'  //css设置，分别设定变化角度，同样的z轴变化，形成一个圆

                });

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

                /*浏览器禁止拖拽功能*/

            });

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

                /*console.log("shu biao an xia le !");*/

                var x_ = ev.clientX;

                var y_ = ev.clientY;

                clearInterval(play);

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

                  /* console.log('yi dong !');*/

                    var x = ev.clientX;

                    var y = ev.clientY;

                    xN = x - x_;

                    yN = y - y_;

                    toY += xN*0.2;

                    toX -= yN*0.1;

                    //$("body").append('<div style="width:5px;height:5px;background:#f00;position:absolute;top:"+y+"px;left:"+x+"px;"></div>')/*打点计数器*/

                    $("div.pic").css({

                       transform:'perspective('+translate+'px) rotateX('+toX+'deg)  rotateY('+toY+'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) <  && Math.abs(yN) <  )/*Math绝对值*/clearInterval(play);

                        toY += xN*0.2;

                        toX -= yN*0.1;

                        $("div.pic").css({

                            transform:'perspective('+translate+'px) rotateX('+toX+'deg)  rotateY('+toY+'deg)'

                        });

                    },);

                    //return play

            });

        });

    </script>

</body>

</html>

借用的网络分享的一个demo，在上面添加了鼠标滚轮放大缩小（没有写兼容，火狐不支持）效果。
有几个知识点记录下：

1.鼠标滚轮事件

在jquery中没有滚轮事件，所以需要我们自己去码

其中ie，chorme，safri中事件为mouseWheel，火狐为DOMMouseScroll，判断滚动方向也不一样，前4者为wheelDelta，后者为detail.detail与wheelDelta只各取两个 值，detail只取±3，wheelDelta只取±120。

2.perspective

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示，镜头距离元素表面的位置是300像素。值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻；反之，值越大，用户与3D空间Z平面距离越远，视觉效果就很小。

3.rotateY

rotateX()、rotateY()和rotateZ()分别为沿X，Y，Z方向旋转。

css3+js打造炫酷图片展示的更多相关文章

  1. GJM ：JS + CSS3 打造炫酷3D相册 [转载]

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...

  2. 9种CSS3炫酷图片展开预览展示动画特效

    详细内容请点击 在线预览立即下载 这是一组共9款CSS3炫酷图片预览展示动画特效插件.css的新特性可以让我们制作出各种炫酷的动画效果.该图片预览展示动画特效就是一个很好的例子,该效果开始时图片堆叠在 ...

  3. JS打造的跟随鼠标移动的酷炫拓扑图案

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. JParticles 2.0 发布，打造炫酷的粒子特效

    JParticles 2.0 发布,打造炫酷的粒子特效.不好意思哈,在这么繁花似锦的世界里,标题不得不取得吸引眼球一点哈,不然...还是不啰嗦了,我们进入正题吧 简单介绍一下 JParticles 2 ...

  5. 你要是还学不会，请提刀来见 Typora+PicGo+Gitee + node.js 打造个人高效稳定优雅图床

    你要是还学不会,请提刀来见 Typora+PicGo+Gitee + node.js 打造个人高效稳定优雅图床 经过前面两弹的介绍,相信大家对图床都不陌生了吧, 但是小魔童觉得这样做法还是不方便,使用 ...

  6. Android ViewPager 打造炫酷欢迎页

    Android ViewPager 打造炫酷欢迎页 ViewPager是Android扩展v4包中的类,这个类可以让用户切换当前的View.对于这个类的应用场景,稍加修改就可以应用到多个环境下.比如: ...

  7. 7款纯CSS3实现的炫酷动画应用|慕课网只学有用的！

    关于我们 | 时尚廊 ♦ 时尚廊,中国大陆地区首家以"Lounge"为概念的艺文空间 ♦  7款纯CSS3实现的炫酷动画应用|慕课网只学有用的! 7款纯CSS3实现的炫酷动画应用

  8. Android 教你打造炫酷的ViewPagerIndicator 不仅仅是高仿MIUI

    1.概述 哈,今天给大家带来一个ViewPagerIndicator的制作,相信大家在做tabIndicator的时候,大多数人都用过 TabPageIndicator,并且很多知名APP都使用过这个 ...

  9. java+js实现完整的图片展示本地目录demo

    java+js实现完整的图片展示本地目录demo 最近的项目满足需要,实现通过一个前端button点击事件,流行音乐浏览下的全部图片: 思路: - 获取到所需展示图片的本地目录内全部图片的文件绝对路径 ...

随机推荐

  1. DOM – 4.doucument属性

    4.document属性 2.1 write 2.2 getElementById 方法 getElementsByName getElementsByTagName 案例:全选反选 案例:点击一个按 ...

  2. 理解Java中的final和static关键字

    回顾这两个关键字前,先考虑一个问题: Static变量存储在JVM中的位置,或者说static变量是如何被加载的? JVM会把类的静态方法和静态变量在类加载的过程中读入方法区(Method Area) ...

  3. [webkit移动开发笔记]之如何去除android上a标签产生的边框（转）

    转载地址:http://www.cnblogs.com/PeunZhang/archive/2013/02/28/2907708.html 去年年底,做完最后一个项目就可以开开心心回家,可是在测试阶段 ...

  4. centos(x86 64位系统)使用boost

    1. 安装gcc,g++,make等开发环境 yum groupinstall "Development Tools" 2. 安装boost yum install boost b ...

  5. 说说JSON和JSONP，也许你会豁然开朗，含jQuery用例 分类： JavaScript 2014-09-23 10:41 218人阅读 评论(1) 收藏

    前言: 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Sock ...

  6. POJ 1061 同余方程

    两只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面.它们很高兴地发现它们住在同一条纬度线上,于是它们约定各自朝西跳,直到碰面为止.可是 它们出发之前忘记了一件很重要的事情,既没有问清楚对方的 ...

  7. Sonar规则学习笔记

    1. A catch statement should never catch throwable since it includes errors. 在catch里永远不要抛出throwable. ...

  8. ApexSQL Log-SQL误操作恢复工具

    今天不小心对数据库执行了一次误操作,心想有没有什么工具能恢复这次误操作呢?于是找到了Log Explorer 4.2,可惜它最多只支持SQL 2005,在SQL 2008上无法使用,然后又找到了Ape ...

  9. memcpy与memmove的区别

    在面试中经常会被问道memcpy与memove有什么区别? 整理如下: 其实主要在考C的关键字:restrict C库中有两个函数可以从一个位置把字节复制到另一个位置.在C99标准下,它们的原型如下: ...

  10. linux网络协议

    网络协议 本章节主要介绍linxu网络模型.以及常用的网络协议分析以太网协议.IP协议.TCP协议.UDP协议 一.网络模型 TCP/IP分层模型的四个协议层分别完成以下的功能: 第一层 网络接口层 ...