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

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

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

  1.  <html onselectstart="return false;">
  2.  
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.      <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
  7.      <style type="text/css">
  8.      body {
  9.          margin: 0;
  10.          padding: 0;
  11.      }
  12.  
  13.      body {
  14.          background: #000;
  15.      }
  16.  
  17.      #wrap {
  18.          width: 120px;
  19.          height: 180px;
  20.          margin: 200px auto 0;
  21.          position: relative;
  22.          transform-style: preserve-3d;
  23.          transform: perspective(800px) rotateX(-10deg);
  24.      }
  25.  
  26.      #wrap img {
  27.          width: 100%;
  28.          height: 100%;
  29.          border-radius: 10px;
  30.          position: absolute;
  31.          top: 0px;
  32.          left: 0px;
  33.          box-shadow: 0 0 10px #fff;
  34.          -webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100% );
  35.          -moz-box-reflect:below 10px -moz-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100% );
  36.      }
  37.      </style>
  38.  </head>
  39.  
  40.  <body>
  41.      <div id="wrap">
  42.          <img src="img/1.jpg" alt="">
  43.          <img src="img/2.jpg" alt="">
  44.          <img src="img/3.jpg" alt="">
  45.          <img src="img/4.jpg" alt="">
  46.          <img src="img/5.jpg" alt="">
  47.          <img src="img/6.jpg" alt="">
  48.          <img src="img/7.jpg" alt="">
  49.          <img src="img/8.jpg" alt="">
  50.          <img src="img/9.jpg" alt="">
  51.          <img src="img/10.jpg" alt="">
  52.          <img src="img/11.jpg" alt="">
  53.      </div>
  54.      <script type="text/javascript">
  55.      $(function() {
  56.          var imgLen = $("#wrap img").size();
  57.          var rotateDeg = 360 / imgLen;
  58.          $("#wrap img").each(function(i) {
  59.              $(this).css('transform', 'rotateY(' + i * rotateDeg + 'deg) translateZ(350px)').attr('ondragstart','return false');
  60.          });
  61.  
  62.          var roY = 0,roX = -10,xN,yN;
  63.          $(document).mousedown(function(ev){
  64.              var x_ = ev.clientX;
  65.              var y_ = ev.clientY;
  66.              $(this).bind('mousemove',function(ev){
  67.                  var x = ev.clientX;
  68.                  var y = ev.clientY;
  69.  
  70.                  xN = x - x_;
  71.                  yN = y - y_;
  72.  
  73.                  roY += xN*0.2;
  74.                  roX -= yN*0.1;
  75.                  $("#wrap").css('transform','perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)');
  76.                  x_ = ev.clientX;
  77.                  y_ = ev.clientY;
  78.              });
  79.          });
  80.          $(document).mouseup(function(){
  81.              $(this).unbind('mousemove');
  82.              var play_ = setInterval(function(){
  83.                  xN = xN*0.95;
  84.                  yN = yN*0.95;
  85.                  if(Math.abs(xN)<0.5 && Math.abs(yN)<0.5){
  86.                      clearInterval(play_);
  87.                  };
  88.                  roY += xN*0.2;
  89.                  roX -= yN*0.1;
  90.                  $("#wrap").css('transform','perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)');
  91.              },30);
  92.          });
  93.      });
  94.      </script>
  95.  </body>
  96.  
  97.  </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. Office 365 E3功能

    本文简要总结了Office 365E3的功能

  2. Elasticsearch 相同内容文档，不同score（评分）的奇怪问题

    原文:http://stackoverflow.com/questions/14580752/elasticsearch-gives-different-scores-for-same-documen ...

  3. 名人问题 算法解析与Python 实现 O(n) 复杂度 （以Leetcode 277. Find the Celebrity为例）

    1. 题目描述 Problem Description Leetcode 277. Find the Celebrity Suppose you are at a party with n peopl ...

  4. SOA架构的理解

    实践论认为:从实践提升到理论,再由理论指导实践,由此向前发展.目前SOA的发展的情况………… 通过不少实践,SOA的模型己经被公认为标准规范,目前是正需要进一步总结上升到理论的时候了. SOA架构的演 ...

  5. lintcode-36-翻转链表 II

    36-翻转链表 II 翻转链表中第m个节点到第n个节点的部分 注意事项 m,n满足1 ≤ m ≤ n ≤ 链表长度 样例 给出链表1->2->3->4->5->null, ...

  6. 敏捷冲刺DAY3

    一. 每日会议 1. 照片 2. 昨日完成工作 3. 今日完成工作 登录界面的进一步完善 服务器搭建 建立数据库 下一步任务的规划,展望 4. 工作中遇到的困难 工作中的困难:在进行模糊查询时,由于中 ...

  7. Zabbix监控配置

    Zabbix在线文档 https://www.zabbix.com/documentation/4.0/zh/manual/config/hosts 1.我们启动服务后,我们看到了端口都正在监听,但是 ...

  8. Zookeeper实现分布式集群监控

    Zookeeepr实现分布式集群监控 Zookeeper中节点有两种:临时节点和永久节点 从类型上看节点又可以分为四种节点类型:PERSIST,PERSIST_SEQUENTIAL,EPHEMERAL ...

  9. iOS进阶--将项目的编译速度提高5倍

    前言 作为开发团队的负责人,最近因为在快速迭代开发新功能,项目规模急速增长,单个端业务代码约23万行,私有库约6万行,第三方库代码约15万行,单个客户端的代码行数约60万.现在打包一次耗时需要11~1 ...

  10. linux系统过一两分钟就断开的时间更改

    vi /etc/ssh/sshd_config LoginGraceTime 参考man sshd_config LoginGraceTime The server disconnects after ...