JavaScript制作3D旋转相册

本文实例为大家分享了js 3D旋转相册展示的具体代码，供大家参考，具体内容如下

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 *{padding:0;margin:0; font-family: "Proxima Nova","proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif !important;}
 html body{overflow: hidden;}
 body{background:#ccc;}
 .box{width:140px; height:200px; -webkit-transform-style:preserve-3d; -webkit-transform: perspective(800px) rotateY(0deg) rotateX(0deg); position:relative; margin:400px auto;}
 .box span{width:140px; height:200px; position: absolute; background:deepskyblue; font-size:20px;
  text-align: center; line-height:200px; color:white;}
 </style>
 <script>
 function r2n(n){
  return n*Math.PI/180
 }
 window.onload=function(){
  var oBox=document.getElementsByClassName('box')[0];
  var aS=document.getElementsByTagName('span');
  for(var i=0;i<aS.length;i++){
  aS[i].style.WebkitTransition='1s all ease '+(aS.length-i)*.1+'s';
  aS[i].style.WebkitTransform='rotateY('+i*360/aS.length+'deg)'+' translateZ(500px) '
  }
  var pos=[];
  var x=0;
  var y=0;
  var timer=null;
  var timer2=null;
  document.onmousedown=function(ev){
  timer=setInterval(function(){
   pos[0]=pos[2];
   pos[1]=pos[3];
   pos[2]=x;
   pos[3]=y;
  },30);
  var disx=ev.pageX-x;
  var disy=ev.pageY-y;
  document.onmousemove=function(ev){
   x=ev.pageX-disx;
   y=ev.pageY-disy;
   oBox.style.WebkitTransform=' perspective(800px)'+' rotateY('+x/3+'deg)'+'rotateX('+-y/3+'deg)';
  };
  document.onmouseup=function(){
   clearInterval(timer);
   var speedx=pos[2]-pos[0];
   var speedy=pos[3]-pos[1];
   timer2=setInterval(function(){
   x+=speedx;
   y+=speedy;
   oBox.style.WebkitTransform=' perspective(800px)'+' rotateY('+x/3+'deg)'+'rotateX('+-y/3+'deg)';
   speedx*=0.94;
   speedy*=0.94;
   if(Math.abs(speedx)<1)speedx=0;
   if(Math.abs(speedy)<1)speedy=0;
   if(speedx==0&&speedy==0){
    clearInterval(timer2)
   }
   },30);
   document.onmousemove=null;
   document.onmouseup=null;
  }
  };
  return false
 }
 </script>
</head>
<body>
<div class="box">
 <span>1</span>
 <span>2</span>
 <span>3</span>
 <span>4</span>
 <span>5</span>
 <span>6</span>
 <span>7</span>
 <span>8</span>
 <span>9</span>
 <span>10</span>
 <span>11</span>
 <span>12</span>
</div>
</body>
</html>

效果图：

可用鼠标拖动。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript制作3D旋转相册

    JavaScript制作3D旋转相册

    本文实例为大家分享了js 3D旋转相册展示的具体代码,供大家参考,具体内容如下 源代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{padding:0;margin:0; font-family: "Proxima Nova&qu

  • js实现3D旋转相册

    本文实例为大家分享了js实现3D旋转相册的具体代码,供大家参考,具体内容如下 效果展示: 使用图片: 剩余自己随意 图片大小为133*200 代码展示: <!DOCTYPE html> <!--设置图片的拖拽事件 不可用--> <html lang="en" ondragstart="return false"> <head> <meta charset="UTF-8"> <tit

  • 教你使用html+css制作一个3D立体相册

    目录 前言 一.先看效果 二.实现步骤 总结 前言 用css的transform属性做一个3D相册~~~值translate表示偏移:scale表示缩放:rotate就是转动. 一.先看效果 二.实现步骤 1.我们知道一个正方体有6个面,所以定义一个父亲元素然后定义6个子元素作为6个面.每个面放一张图片.里面q1表示前面,h2表示后面,以此类推,就是首拼音. <div class="baba"> <div class="q1"> <im

  • 利用JavaScript制作一个酷炫的3D图片演示

    利用JavaScript制作一个酷炫的3D图片演示

    目录 前言 一.页面特效效果展示 二.功能描述 三.功能实现 前言 对于学前端的小伙伴来说,吸引你们入坑的大都是一些炫酷的页面.但往往那些页面的源代码对初学的伙伴们都不太友好.今天给大家分享一个代码简单.适合初学者.高级感炫酷感爆棚的特效页面(有npy的快乐加倍!). 一.页面特效效果展示 注:上述效果图只是部分效果,原谅我还没有学会自制gif图! 二.功能描述 1.打开页面,所有图片会自动转动 2.图片的大小和间隔可随鼠标滚轮滚动而改变 3.鼠标按住页面任意位置,拖动光标,页面可随之旋转 三.

  • JavaScript实现的3D旋转魔方动画效果实例代码

    JavaScript实现的3D旋转魔方动画效果实例代码

    JS1K是JavaScript编程竞赛--参加竞赛的规则很简单,脚本必须小于1K,竞赛网站开始也只是为了娱乐,却意外地收到了很多优秀的作品. 这是2016年JS1k上传的作品,用几十行代码实现的一个3D旋转魔方: 代码如下: function z(t, e) { return t? e? t.appendChild(e) : "width:"+t+"px;height:"+t+" px;position:absolute;" : document

  • 教你用Matlab制作立体动态相册

    教你用Matlab制作立体动态相册

    目录 效果 教程部分 1图片导入与大小重设 2figaxes设置 3绘制图形句柄 4立方体旋转 5获取鼠标与中心点的距离 6鼠标移动到fig中心时更新图片 完整代码 效果 教程部分 1 图片导入与大小重设 需要有一个名为album的文件夹和当前m文件在同一文件夹,另外ablum文件夹内至少要有一张jpg格式图片 path='.\album\';%文件夹名称 files=dir(fullfile(path,'*.jpg')); picNum=size(files,1); %遍历路径下每一幅图像 f

  • 利用CSS制作3D动画

    利用CSS制作3D动画

    目录 CSS 3D 基础知识 使用 transform-style 启用 3D 模式 利用 perspective & perspective-origin 设置 3D视距,实现透视/景深效果 通过绘制 Webpack Logo 熟悉 CSS 3D 实现文字的 3D 效果 3D 氖灯文字效果 利用 CSS 3D 配合 translateZ 实现真正的文字 3D 效果 利用距离.角度及光影构建不一样的 3D 效果 3D 计数器 空间效果 空间 3D 效果热身 利用图片素材 3D 无限延伸视角动画

  • Python&Matlab实现炫酷的3D旋转图

    Python&Matlab实现炫酷的3D旋转图

    目录 前言 1.Python爬取美女照片 1.1 留恋忘返的网址 1.2 Python代码 1.3 结果 2.Python实现 2.1 条件准备 2.2 运行展示 2.3 Python实现 3.Matlab实现 3.1 运行展示 3.2 Matlab代码 前言 我们今天的任务很明确,我先系统梳理一下: 1.先用Python爬取一波漂亮的美女照片: 2.然后Python中炫酷的代码实现: 3.最后用matlab伺候,得到相同的结果. 1.Python爬取美女照片 1.1 留恋忘返的网址 站长素材-

  • 利用JavaScript实现3D可旋转粒子矩阵效果

    利用JavaScript实现3D可旋转粒子矩阵效果

    目录 演示 技术栈 dat.gui.min.js 源码 js部分 演示 技术栈 本次使用了dat.gui.min.js这个新库(就是在我文章里没有出现过的那么他们的功能有哪些呢?——可以百度搜搜)不想搜的话就听我简单絮叨两句吧. dat.gui.min.js 就是能调节数据的功能框 使用起来也很简单例如建立一个对象 gui = { lightY:30, //灯光y轴的位置 sphereX:0, //球的x轴的位置 sphereZ:0, //球的z轴的位置 cubeX:25, //立方体的x轴位置

  • Three.js+React制作3D梦中海岛效果

    Three.js+React制作3D梦中海岛效果

    目录 背景 效果 实现 素材准备 资源引入 页面结构 场景初始化 海 天空 虹 岛 鸟 交互点 动画 总结 背景 深居内陆的人们,大概每个人都有过大海之梦吧.夏日傍晚在沙滩漫步奔跑:或是在海上冲浪游泳:或是在海岛游玩探险:亦或静待日出日落……本文使用 React + Three.js 技术栈,实现 3D 海洋和岛屿,主要包含知识点包括:Tone Mapping.Water 类.Sky 类.Shader 着色.ShaderMaterial 着色器材质.Raycaster 检测遮挡以及 Three.

随机推荐