jquery+css3实现3D拖拽相册

设置3d效果
transform-style:preserve-3d;
transform:perspective(800px) rotateX(-10deg) rotateY(0deg);

rotateX(-10deg) （屏幕内外，-10deg为向外10度偏转）
rotateY(0deg); 左右

变成圆角
border-radius:5px;

倒影（很多浏览器不兼容）
box-shadow:0px 0px 10px #fff;
-webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0)50%,rgba(0,0,0,.5)100%);（从实物50%的地方开始往下面到100%）

（页面）document树加载完成后触发,jquary可以添加document树的组件，操作文档
$(function()

计时器函数
setInterval(function(){});

下面是代码：（文件打包已经上传，需要图片）

<!DOCTYPE html>
<html onselectstart='return  false'>
<head>
<meta charset="UTF-8">
<title>3D拖拽相册</title>
<!-- 层叠样式表,化妆师 -->


<style type="text/css">
*{
	margin:0px;
	padding:0px;
}

body{
	background:#000000;
}

div.pic{
	width:120px;
	height:180px;
	margin:150px auto 0;
	position:relative;
	transform-style:preserve-3d;
	transform:perspective(800px) rotateX(-10deg) rotateY(0deg);
	
}

div.pic img{
	position :absolute;
	width:100%;
	height:100%;
	border-radius:5px;
	box-shadow:0px 0px 10px #fff;
	-webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0)50%,rgba(0,0,0,.5)100%);
	
}
div.pic p{
	width:1200px;
	height:1200px;
	background:-webkit-radial-gradient(center center,600px 600px,rgba(255,255,255,.3),rgba(0,0,0,0));
	position:absolute;
	left:50%;
	top:100%;
	margin-top:-600px;
	margin-left:-600px;
	transform: rotateX(90deg);
	border-radius:600px;
}
</style>

</head>
<body>

<div class="pic">
	<img src='1.jpg'/>
	<img src='2.jpg'/>
	<img src='3.jpg'/>
	<img src='4.jpg'/>
	<img src='5.jpg'/>
	<img src='6.jpg'/>
	<img src='7.jpg'/>
	<img src='8.jpg'/>
	<img src='9.jpg'/>
	<img src='10.jpg'/>
	<img src='11.jpg'/>
	<p></p>
</div>
	<script src="jquery-1.11.3.min.js"></script>
	<script>
	//页面加载完成后直接执行
		$(function(){
			var imgL= $('.pic img').size();
			var deg=360/imgL;
			var roY=0;
			var roX=-10;
			var xN=0;
			var yN=0;
			$('.pic img').each(function(i){
				$(this).css({
					'transform':'rotateY('+i*deg+'deg)translateZ(350px);'
				});
				$(this).attr('ondragstart','return false');				
			});
			
			$(document).mousedown(function(ev){
				var x_=ev.clientX;
				var y_=ev.clientY;
		
			//	console.log('鼠标按下！');
				$(this).bind('mousemove',function(ev){
			//		console.log("鼠标在移动");
					var x=ev.clientX;
					var y=ev.clientY;
					
					xN=x-x_;
					yN=y-y_;
					roY+=xN*0.2;
					roX-=yN*0.1;
					//用鼠标画出div格子，drag，利用格子的间距模仿快慢
				//	$('body').append('<div style="width:5px;height:5px;background:#f00;position:absolute;top:'+y+'px;left:'+x+'px;"></div>')
				
					$('div.pic').css({
						transform:'perspective(800px) rotateY('+roY+'deg) rotateX('+roX+'deg)'
						
					});
					 x_=ev.clientX;
					 y_=ev.clientY;
				});
			}).mouseup(function(){
				//console.log('鼠标抬起');
				$(this).unbind('mousemove');
				
				var play=setInterval(function(){
					xN*=0.95;
					yN*=0.95
					if(Math.abs(xN)<1&&Math.abs(yN)<1)
					//停止这个函数
					clearInterval(play);
					
					roY+=xN*0.2;
					roX-=yN*0.1;
					$('div.pic').css({
						transform:'perspective(800px) rotateY('+roY+'deg) rotateX('+roX+'deg)'
					});
					console.log(xN);
				},30);
			});
			
		});
	</script>
</body>
</html>

jquery+css3实现3D拖拽相册

猜你喜欢