使用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/countwindow.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.clientXlet oldy = event.clientYthis.onmousemove = function(e){var e = e || window.event;let newx = e.clientXlet newy = e.clientYvar minusX =newx-oldxminusY =newy-oldyrotateX+=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
