实现图片3D效果（初步）

最新推荐文章于 2023-06-03 01:24:05 发布

liulu璐

最新推荐文章于 2023-06-03 01:24:05 发布

阅读量653

点赞数 1

文章标签： css js html

本文链接：https://blog.csdn.net/qq_43566612/article/details/107854515

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body{
				cursor: grab;
				margin: 0px;
				background-color: black;
				overflow: hidden;
			}
			#perspective{
				perspective: 800px; /* 设置场景 */
			}
			#wrap{
				position: relative;
				width: 210px;//根据图片大小设置
				height: 200px;
				margin: 150px auto;
				transform-style:preserve-3d ;//设置3D
				transform:rotateX(-20deg) rotateY(0deg) ;//旋转
			}
			img{
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="perspective">
			<div id="wrap">
				<img src="img/1.jpg" alt="">
				<img src="img/2.jpg" alt="">
				<img src="img/3.jpg" alt="">
				<img src="img/4.jpg" alt="">
				<img src="img/5.jpg" alt="">
				<img src="img/6.jpg" alt="">
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var oWrap=document.getElementById("wrap");
		var Img=document.getElementsByTagName("img");
		var length=Img.length;
		var deg=360/length;
		
		window.onload=function(){//在整个文档加载完后进行加载
			Array.prototype.forEach.call(Img,function(element,index,self){
				element.style.transform="rotateY("+deg*index+"deg) translateZ(350px)"; 
				element.style.transition="1s " +(length-index)*0.5+"s";
			});
		}
		var newX,newY,lastX,lastY,minusX,minusY,rotX=-20,rotY=0;
		document.onmousedown=function(e){//鼠标点击
			lastX=e.clientX;
			lastY=e.clientY;
			
			this.onmousemove=function(e){//鼠标移动
				newX=e.clientX;
				newY=e.clientY;
				
				minusX=newX-lastX;
				minusY=newY-lastY;
				
				rotX -=minusY;
				rotY +=minusY;
				oWrap.style.transform="rotateX("+rotX+"deg) rotateY("+rotY+"deg)"
				lastX=newX;
				lastY=newY;
			}
			this.onmouseup=function(e){//鼠标松开
				this.onmousemove=null;
			}
		}
	</script>
</html>