js制作3d立体旋转相册

最新推荐文章于 2024-06-12 13:39:48 发布

岳清流云

最新推荐文章于 2024-06-12 13:39:48 发布

阅读量2.9k

点赞数 3

分类专栏： javascript JavaScript 文章标签： html js

本文链接：https://blog.csdn.net/tdl081071tdy/article/details/90644084

版权

JavaScript 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

javascript

11 篇文章 0 订阅

订阅专栏

使用js做一个3d立体旋转相册

可自由拖拽

源码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>1</title>
	<style type="text/css">
		.main{
			perspective: 800px;
		}
		#mian img{
			width: 200px;
			height: 200px;
			position: absolute;
		}
		#mian{
			width:200px;
			height: 200px;
			margin:200px auto;
			border: solid 1px red;
			transform-style: preserve-3d;
            transform:rotateX(-10deg) rotateY(0deg);
		}
	</style>
</head>
<body>
	<div class="main">
		<div id="mian">
			<img src="../img/1.jpg">
			<img src="../img/1.jpg">
			<img src="../img/1.jpg">
			<img src="../img/1.jpg">
			<img src="../img/1.jpg">
		</div>
	</div>
</body>
</html>
<script type="text/javascript">
	let img = document.getElementsByTagName('img');
	let count = img.length;
	let deg = 360/count
	window.onload=function(){
		Array.prototype.forEach.call(img,function(value,index){

			value.style.transform="rotateY("+(index * deg)+"deg) translateZ(350px)"

			value.style.transition="1s "+(count-index)*0.1+"s"//1s 长度减下标乘以0.1 5-0=5，5-1=4，5-2=3
		})
	}

    var rotateX = -20;
    var rotateY = 0;
    document.onmousedown=function(event){
          let oldx = event.clientX
          let oldy = event.clientY
          this.onmousemove = function(e){
     		     var e = e || window.event;
          		let newx = e.clientX
          		let newy = e.clientY

          		var minusX =newx-oldx
          			minusY =newy-oldy

          		rotateX+=minusY;
          		rotateY+=minusX;

          		mian.style.transform="rotateX("+(-rotateX)*0.1+"deg) rotateY("+(rotateY)*0.1+"deg) "
          		oldx = newx;
          		oldy = newy
          }
          this.onmouseup = function () {
                 //鼠标松开事件 
              this.onmousemove = null;
          }
     }
</script>

b站链接，麻烦各位大佬点一下，

https://www.bilibili.com/video/BV1ja4y1Y77L?from=search&seid=6351773522394126910

岳清流云

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
js制作3d立体旋转相册

使用js做一个3d立体旋转相册可自由拖拽源码如下<!DOCTYPE html><html><head><meta charset="utf-8"> <title>1</title> <style type="text/css"> .main{ perspective: 800p...
复制链接

扫一扫