3D相册旋转

最新推荐文章于 2023-11-09 11:16:08 发布
心忘则忘
最新推荐文章于 2023-11-09 11:16:08 发布
阅读量468
点赞数
CC 4.0 BY-SA版权
本文链接：https://blog.youkuaiyun.com/nkdwslsd/article/details/51570269
*{padding: 0;margin: 0;}

body{
	background-color: #000;
	-webkit-user-select: none;
	overflow: hidden;
}

.stage{
	width: 133px;
	height: 200px;
	position: relative;
	/*border: 1px solid #f66;*/
	margin: 200px auto;
	-webkit-transform-style:preserve-3d ;
	-moz-transform-style:preserve-3d ;
	-ms-transform-style: preserve-3d;
	transform-style:preserve-3d;
	transform: perspective(800px) rotateX(-15deg);
}
.stage img{
	position: absolute;
	display: block;
	/*投影*/
	-webkit-box-reflect:below 10px;
	/*线性渐变*/ 
	-webkit-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,0.7) 100%);
	-webkit-border-radius: 20px;
	-webkit-box-shadow: 0 0 5px #fff;
	
}
/*.stage img:nth-child(1){
	transform: rotateY(0deg) translateZ(300px);
}

.stage img:nth-child(2){
	transform: rotateY(36deg) translateZ(300px);
}
.stage img:nth-child(3){
	transform: rotateY(72deg) translateZ(300px);
}
.stage img:nth-child(4){
	transform: rotateY(108deg) translateZ(300px);
}
.stage img:nth-child(5){
	transform: rotateY(144deg) translateZ(300px);
}
.stage img:nth-child(6){
	transform: rotateY(180deg) translateZ(300px);
}
.stage img:nth-child(7){
	transform: rotateY(216deg) translateZ(300px);
}
.stage img:nth-child(8){
	transform: rotateY(252deg) translateZ(300px);
}
.stage img:nth-child(9){
	transform: rotateY(288deg) translateZ(300px);
}
.stage img:nth-child(10){
	transform: rotateY(324deg) translateZ(300px);
}*/<pre name="code" class="html"><!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
	</head>
	<body>
		<div class="stage" id="stage">
		<img src="img/1.jpg"/>
		<img src="img/2.jpg"/>
		<img src="img/3.jpg"/>
		<img src="img/4.jpg"/>
		<img src="img/5.jpg"/>
		<img src="img/6.jpg"/>
		<img src="img/7.jpg"/>
		<img src="img/8.jpg"/>
		<img src="img/9.jpg"/>
		<img src="img/10.jpg"/>
		<img src="img/11.jpg"/>
		</div>
	</body>
	<script type="text/javascript">
		var stage = document.getElementById("stage");
		//获取到所有图片
		var imgs = stage.getElementsByTagName("img");
		//获取图片的长度
		var len = imgs.length;
		//每一张图片的旋转角度
		var rot = 360/len;
		//使用循环实现效果
		var i=0;
		for(i=0;i<len;i++)
		{
			imgs[i].style.transform = "rotateY("+(rot*i)+"deg) translateZ(300px)"
		}
		
		//x和y方向上运动的差值
		var stepX = 0;
		var stepY = 0;
		//旋转角度
		var rotX = 0;
		var rotY = 0;
		//强这个页面中的拖拽效果禁用掉
		document.ondragstart = function(){
			return false;
		}
		document.onmousedown = function(e){
			//获取点击点的坐标
			var mouX = e.clientX;
			var mouY = e.clientY;
			//鼠标点击下去并且拖动
			document.onmousemove = function(e){
				//拖动过程产生的一系列点的坐标
				var newMouX = e.clientX;
				var newmouY = e.clientY;
				stepX = newMouX - mouX;
				stepY = newmouY - mouY;
				//模拟旋转的角度，就是将差值乘以一个小赔率的值
				rotX += stepY * 0.2;
				rotY += stepX * 0.1;
				
				
				//旋转,先将预定义的写进来，在写新的
stage.style.webkitTransform = "perspective(800px) rotateX(-15deg) rotateX("+rotX+"deg) rotateY("+rotY+"deg)";
				
				
				//为了连续性，我们将这组值作为我们的初始点
				mouX = newMouX;
				mouY = newmouY;
			}
		}
		document.onmouseup = function(){
			document.onmousemove=null;
		}
//		function cssTransform(ele,str){
//			var style["webkit","Moz","ms","o".""];
//			for(var =0;i<5;i++){
//				ele.style[styles[i]+"Transform"]=str;
//				
//			}
//		}
	</script>
</html>