css3_small_effect
/
index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body{
			background-color: black;
			color:#ccc;
			cursor: pointer;
		}
		.stage{
			width: 800px;
			height: 400px;
			border: 1px solid #000;
			margin: 0 auto;
			perspective:900px;
		}
		.stage .unit{
			width: 800px;
			height: 400px;
			position: relative;
			transform-style:preserve-3d;
 			transition:all 0.5s ease 0s;
		}
		.stage .unit ul{
			list-style: none;
		}
		.stage .unit ul li{
			position: absolute;
			left: 300px;
			top: 135px;
		}
		input{
			position: relative;
			z-index: 999;
		}
	</style>
	</head>
	<body>
		<h1>请滚动滚轮</h1>
		<div class="stage">
			<div class="unit">
				<ul>
					<li><img src="images/1.png" alt="" /></li>
					<li><img src="images/2.png" alt="" /></li>
					<li><img src="images/3.png" alt="" /></li>
					<li><img src="images/4.png" alt="" /></li>
					<li><img src="images/5.png" alt="" /></li>
					<li><img src="images/6.png" alt="" /></li>
					<li><img src="images/7.png" alt="" /></li>
					<li><img src="images/8.png" alt="" /></li>
					<li><img src="images/9.png" alt="" /></li>
				</ul>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
		<script src="js/jquery.mousewheel.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		var $unit = $(".unit");


		$(".unit ul li").each(function(i){
			$(this).css("transform","rotateY(" + (i * 40) + "deg) translateZ(400px)");
		});

		var nowdegree = 0;		//信号量
		var lock = true;		//函数截流

		//滚轮事件
 		$(".stage").mousewheel(function(event,delta){
 			//函数节流
 			if(!lock) return;
 			//阻止默认事件
 			event.preventDefault();

 			nowdegree -= delta * 40;

 			$unit.css("transform","rotateY(" + nowdegree + "deg)");

 			lock = false;

 			setTimeout(function(){
 				lock = true
 			}, 500);
 		});


 		//拖拽业务

 		var startX;
 		var startY;
 		$(document).mousedown(function(event){
 			startX = event.clientX;
 			startY = event.clientY;
 			console.log(startX,startY);

 			$unit.css("transition","none");

 			$(document).mousemove(function(event){
	 			var deltaX = event.clientX - startX;
	 			var deltaY = event.clientY - startY;
	 			console.log(deltaX,deltaY);

	 			$unit.css("transform","rotateX(" + -deltaY / 5 + "deg) rotateY(" + deltaX / 5 + "deg)");
	 			return false;
 			});

 		});

 		$(document).mouseup(function(){
			$(document).off("mousemove");

			$unit.css("transition","all 0.5s ease 0s");
		})


	</script>
	</body>
</html>