使用JavaScript制作3D旋转相册

欢迎大家访问我的个人博客 http://www.spicyboy.cn

源代码:

<!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>

效果图:
在这里插入图片描述

可用鼠标拖动。

  • 5
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
制作3D旋转相册可以使用HTML、CSS、JavaScript和一些图像处理工具。以下是一个简单的HTML代码示例,可以用来创建一个基本的3D旋转相册: ```html <!DOCTYPE html> <html> <head> <title>3D旋转相册</title> <style> /* 设置相册容器 */ #album { perspective: 1000px; transform-style: preserve-3d; width: 500px; height: 500px; margin: 0 auto; } /* 设置相册中图片的样式 */ .photo { position: absolute; width: 300px; height: 300px; margin: 0 auto; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); border-radius: 10px; transform-style: preserve-3d; transition: all 1s ease-in-out; } /* 设置相册中图片的位置 */ .photo:nth-child(1) { transform: rotateY(0deg) translateZ(250px); } .photo:nth-child(2) { transform: rotateY(60deg) translateZ(250px); } .photo:nth-child(3) { transform: rotateY(120deg) translateZ(250px); } .photo:nth-child(4) { transform: rotateY(180deg) translateZ(250px); } .photo:nth-child(5) { transform: rotateY(240deg) translateZ(250px); } .photo:nth-child(6) { transform: rotateY(300deg) translateZ(250px); } /* 鼠标悬停时放大图片 */ .photo:hover { transform: scale(1.2); } </style> </head> <body> <div id="album"> <img class="photo" src="photo1.jpg"> <img class="photo" src="photo2.jpg"> <img class="photo" src="photo3.jpg"> <img class="photo" src="photo4.jpg"> <img class="photo" src="photo5.jpg"> <img class="photo" src="photo6.jpg"> </div> <script> // 旋转相册 var album = document.getElementById('album'); var photos = document.getElementsByClassName('photo'); var angle = 0; setInterval(function() { angle += 1; album.style.transform = 'rotateY(' + angle + 'deg)'; }, 50); </script> </body> </html> ``` 在这个示例中,我们创建了一个名为“album”的div容器,用于包含所有的照片。每张照片都是一个名为“photo”的img元素,其位置和旋转角度通过CSS的transform属性进行设置。我们使用JavaScript来控制相册旋转角度,使其每50毫秒旋转1度。 你可以将这个示例代码复制到一个HTML文件中,并将其中的图片链接替换成你自己的图片链接,然后打开这个HTML文件即可看到一个简单的3D旋转相册。你可以进一步优化和扩展这个相册,例如增加图片数量、添加照片描述、改变相册的背景等。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值