3D旋转相册

最新推荐文章于 2024-10-18 20:20:40 发布

轻语积累

最新推荐文章于 2024-10-18 20:20:40 发布

阅读量1.7k

点赞数 3

文章标签： 3d css css3

本文链接： https://blog.csdn.net/weixin_37077736/article/details/130548015

版权

这段代码演示了一个使用HTML和CSS3创建的3D旋转相册效果，通过CSS3的transform属性实现图片的3D旋转，并利用JavaScript处理鼠标事件，实现拖拽旋转的交互功能。代码中的关键元素包括perspective、rotateY、translateZ以及过渡和动画效果。

摘要由CSDN通过智能技术生成

效果展示
在这里插入图片描述
代码逻辑

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>3D旋转 - 相册</title>
	<style type="text/css">
		*{margin:0;padding:0;}
		body{
			background:#222;
			perspective:800px;/*景深*/
		}
		#wrap{
			position:relative;
			width:120px;
			height:180px;
			margin:auto;
			transform-style:preserve-3d;/*设置3D环境*/
		}
		#wrap img{
			position:absolute;
			width:133px;
			height:200px;
			box-shadow:0 0 10px #000;
			/*倒影:朝向 偏移*/
			-webkit-box-reflect:below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100%);
			border-radius:5px;/*圆角*/
			/* transform:rotateY(0deg) translateZ(0px); */
			/*transition:1s 1s;动画执行的时间 动画延迟的时间*/
		}
		#wrap p{
			position:absolute;
			left:50%;
			top:112%;
			margin-left:-600px;
			margin-top:-600px;
			width:1200px;
			height:1200px;
			border-radius:50%;
			background:-webkit-radial-gradient(center center,600px 600px,rgba(122,122,122,0.2),rgba(0,0,0,0));
			transform:rotateX(90deg);
		}
	</style>
</head>
<body>
	<div id="wrap">
		<img src="images/1.jpg" alt="" />
		<img src="images/2.jpg" alt="" />
		<img src="images/3.jpg" alt="" />
		<img src="images/4.jpg" alt="" />
		<img src="images/5.jpg" alt="" />
		<img src="images/6.jpg" alt="" />
		<img src="images/7.jpg" alt="" />
		<img src="images/8.jpg" alt="" />
		<img src="images/9.jpg" alt="" />
		<img src="images/10.jpg" alt="" />
		<img src="images/11.jpg" alt="" />
		<p></p>
	</div>
	<script type="text/javascript">
		var oWrap = document.getElementById("wrap");
		var aImg = oWrap.getElementsByTagName("img");
		//让盒子自适应的垂直居中
		function mTop(){
			//获取浏览器窗口可视区域的高度
			var H = document.documentElement.clientHeight;
			oWrap.style.marginTop = H/2 - 180 + "px"
		}
		mTop();
		window.onresize = mTop;

		//图片初始动画
		var len = aImg.length;//获取图片的个数
		
		var Deg = 360/len;//每一张图片所占的角度
		for (var i=0;i<len;i++ )
		{
			aImg[i].style.transform = "rotateY("+i*Deg+"deg) translateZ(350px)";
			aImg[i].style.transition = "1s "+(len-1-i)*0.1+"s";
		}
		//鼠标事件(按下 移动 抬起) 拖拽旋转
		var lastX,lastY,nowX,nowY,minX,minY,roX=0,roY=0,timer;
		document.onmousedown = function(ev){
			clearInterval(timer);
			var ev = ev||window.event;
			//获取鼠标按下去的坐标位置
			lastX = ev.clientX;
			lastY = ev.clientY;
			this.onmousemove = function(ev){
				var ev = ev||window.event;
				//移动过程中鼠标的坐标位置
				nowX = ev.clientX;
				nowY = ev.clientY;
				//计算出鼠标坐标的差值
				minX = nowX - lastX;
				minY = nowY - lastY;
				//计算容器旋转的角度
				roY += minX*0.2;//roY = roY + minX*0.2
				roX -= minY*0.1;
				//console.log(roX,roY);
				//让整个图片容器跟随鼠标动
				oWrap.style.transform = "rotateX("+roX+"deg) rotateY("+roY+"deg)";
				lastX = nowX;
				lastY = nowY;
			}
			this.onmouseup = function(){
				this.onmousemove = null;
				this.onmouseup = null;
				timer = setInterval(function(){
					minX *=0.95;//让minX逐渐减小
					minY *=0.95;
					roY += minX*0.2;
					roX -= minY*0.1;
					oWrap.style.transform = "rotateX("+roX+"deg) rotateY("+roY+"deg)";
					//当minX达到足够小的值时 清楚定时器
					if (Math.abs(minX)<0.1 && Math.abs(minY)<0.1)
					{
						clearInterval(timer);
					}
				},1000/60);
			}
			return false;//阻止默认事件
		}
	</script>
</body>
</html>