建议chorme浏览器浏览，有样式兼容性问题。

图片可以根据自己本地路径设置路径，js库引用jquery。

写的不好，多多建议，谢谢大家。

 <html onselectstart="return false;">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

     <style type="text/css">

     body {

         margin: 0;

         padding: 0;

     }

     body {

         background: #000;

     }

     #wrap {

         width: 120px;

         height: 180px;

         margin: 200px auto 0;

         position: relative;

         transform-style: preserve-3d;

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

     }

     #wrap img {

         width: 100%;

         height: 100%;

         border-radius: 10px;

         position: absolute;

         top: 0px;

         left: 0px;

         box-shadow: 0 0 10px #fff;

         -webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100% );

         -moz-box-reflect:below 10px -moz-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100% );

     }

     </style>

 </head>

 <body>

     <div id="wrap">

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

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

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

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

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

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

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

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

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

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

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

     </div>

     <script type="text/javascript">

     $(function() {

         var imgLen = $("#wrap img").size();

         var rotateDeg = 360 / imgLen;

         $("#wrap img").each(function(i) {

             $(this).css('transform', 'rotateY(' + i * rotateDeg + 'deg) translateZ(350px)').attr('ondragstart','return false');

         });

         var roY = 0,roX = -10,xN,yN;

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

             var x_ = ev.clientX;

             var y_ = ev.clientY;

             $(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;

                 $("#wrap").css('transform','perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)');

                 x_ = ev.clientX;

                 y_ = ev.clientY;

             });

         });

         $(document).mouseup(function(){

             $(this).unbind('mousemove');

             var play_ = setInterval(function(){

                 xN = xN*0.95;

                 yN = yN*0.95;

                 if(Math.abs(xN)<0.5 && Math.abs(yN)<0.5){

                     clearInterval(play_);

                 };

                 roY += xN*0.2;

                 roX -= yN*0.1;

                 $("#wrap").css('transform','perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)');

             },30);

         });

     });

     </script>

 </body>

 </html>

直接需求代码的+qq：596023011

旋转 3d的更多相关文章

  1. CSS3 旋转3D立方体

    <meta charset="utf-8"> <style> *{ margin:0px; padding:0px; } @-webkit-keyframe ...

  2. 旋转3D立方体

    <!DOCTYPE html><html><head> <title>css-3d-盒子</title> <meta charset= ...

  3. HTML5 纯CSS3实现正方体旋转3D效果

    实现效果: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  4. 【CSS3进阶】酷炫的3D旋转透视

    之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研 ...

  5. centos 3d特效

    说下我怎么实现的吧 1.现在新力得里搜“XGL”和“Compiz”,把相关软件安装好. 2.安装ndivid的glx驱动: sudo apt-get install nvidia-kernel-com ...

  6. 二.ubuntu14.04 3D特效设置

    一.如果按照第一篇都设置好了(显卡驱动等都已经正常),然后 1.安装CCSM设置管理器 用鼠标点击屏幕左侧Unity程序启动栏中的“Ubuntu软件中心”(有“A”字形的公文包图标), 在弹出的“Ub ...

  7. 为 .NET Core 设计一个 3D 图形渲染库

    原文地址:https://mellinoe.wordpress.com/2017/02/08/designing-a-3d-rendering-library-for-net-core/ 作者:ERI ...

  8. 13 款最棒的 jQuery 图像 360° 旋转插件

    在 web 页面上使用 jQuery 图像 360 度旋转插件是最美也是最方便的显示图像的方式.这些超级棒的 360° 图像选择插件允许用户更详细的分析产品或者文章.jQuery 图像旋转插件可以让用 ...

  9. css3图书3D动画

    css3图书3D动画,css3,立体特效,旋转效果,3D动画,css3图书3D动画是一款基于css3实现的立体旋转3D图书动画特效. 代码下载页:http://www.huiyi8.com/sc/71 ...

随机推荐

  1. 从零开始的Python学习Episode 5——字典

    字典 字典是另一种可变容器模型,且可存储任意类型对象. 一.添加 (1)直接添加 dict={'name':'smilepup'} dict['age']=20 dict['name']='piggy ...

  2. wamp下安装https 实现 ssl 协议，主要是编写小程序通讯

    也不知道腾讯为啥要这个限制,是想卖他的服务器资源么 简单几句话 1 wamp3.0.X的版本不行,我折腾了一天半,放弃了,换成wamp2.5 一次通过 2 证书 去腾讯云申请,单独域名的可以申请免费的 ...

  3. Python高级编程-itertoos模块

    Python的内建模块itertools提供了非常有用的用于操作迭代对象的函数. 首先我们看看itertools模块提供的几个“无限”迭代器, import itertools naturals = ...

  4. 拓扑排序（Toposort）

    摘自:https://blog.csdn.net/qq_35644234/article/details/60578189 <图论算法> 1.拓扑排序的介绍 对一个有向无环图(Direct ...

  5. 团队作业week9 情景测试

    一.使用人群:学生.计算机工作者.对计算机感兴趣的人 1.学生:学生是学霸系统的主要用户.学生一般会通过网络寻找与自己的课程,作业有关的信息.首先,可以通过我们的搜索功能在我们的数据库中寻找我们从网络 ...

  6. oracle数据库之触发器

    触发器是许多关系数据库系统都提供的一项技术.在 ORACLE 系统里,触发器类似过程和函数,都有声明,执行和异常处理过程的 PL/SQL 块. 一. 触发器类型 触发器在数据库里以独立的对象存储,它与 ...

  7. Java中的死锁问题

    死锁问题: 例如有两个线程, 线程1与线程2. 线程1在执行的过程中, 要锁定对象1, 2才能完成整个操作, 首先锁定对象1, 再锁定对象2. 线程2在执行的过程中, 要锁定对象2, 1才能完成整个操 ...

  8. 【beta】Scrum站立会议第1次....11.3

    beta阶段,我们nice!团队将进行为期两周的冲刺,Scrum站立会议10次. 小组名称:nice! 组长:李权 成员:于淼  刘芳芳韩媛媛 宫丽君 项目内容:约跑app(约吧) 时间:2016.1 ...

  9. 【EF】Entity Framework Core 2.0 特性介绍和使用指南

    阅读目录 前言 获取和使用 新特性 项目升级和核心API变化 下一步计划 遗憾的地方 回到目录 前言 这是.Net Core 2.0生态生态介绍的最后一篇,EF一直是我喜欢的一个ORM框架,随着版本升 ...

  10. JAVA开发工作流程

    阶段 0 :拟出一个计划 决定在后面的过程中采取哪些步骤,思考整个开发任务如何实现,分步骤建立“路标”,这样可以帮助自己开发时一步一个脚印的逐步完成,有效的防止自己在开发过程中迷失方向. 阶段 1 : ...