3D旋转相册

最新推荐文章于 2024-06-17 03:12:17 发布

竹一

最新推荐文章于 2024-06-17 03:12:17 发布

阅读量4.1k

点赞数 4

分类专栏： JavaWeb的学习 HTML5

JavaWeb的学习同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

HTML5

1 篇文章 0 订阅

订阅专栏

今天在知乎看到一个3d旋转相册，感觉不错，准备把源码贴这，分享给大家，给那些准备告白的人用。


<!DOCTYPE HTML>
<html onselectstart='return false'>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<title>3D相册拖拽动画</title>
		<style type="text/css">
			*{ margin:0; padding:0;}
			body{ background:#000; width:100%; height:100%; overflow:hidden}
			#wrap{ width:133px; height:200px; margin:25% auto 0;
				position:relative;
				top:-100px;
				transform-style:preserve-3d;
				transform:perspective(800px) rotateX(-10deg) rotateY(0deg);
				}
			#wrap ul li{
				list-style:none;
				width:120px;
				height:120px;
				position:absolute;
				top:0;left:0;
				border-radius:3px;
				box-shadow:0 0 10px #fff;
				background-size:100%;
				
				transform:rotateY(0deg) translateZ(0px);
				-webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100%);
			}
			#wrap p{ width:1200px; height:1200px; position:absolute; border-radius:100%;
				left:50%; top:100%; margin-left:-600px; margin-top:-600px;
				background:-webkit-radial-gradient(center center,600px 600px,rgba(50,50,50,1),rgba(0,0,0,0));
				transform:rotateX(90deg);}
		</style>

	</head>
	<body>
		<div id="wrap">
			<ul>
				<li style="background-image:url(img/1.jpg);"></li>
				<li style="background-image:url(img/2.jpg);"></li>
				<li style="background-image:url(img/3.jpg);"></li>
				<li style="background-image:url(img/4.jpg);"></li>
				<li style="background-image:url(img/5.jpg);"></li>
				<li style="background-image:url(img/6.jpg);"></li>
				<li style="background-image:url(img/7.jpg);"></li>
				<li style="background-image:url(img/8.jpg);"></li>
				<li style="background-image:url(img/9.jpg);"></li>
				<li style="background-image:url(img/10.jpg);"></li>
				<li style="background-image:url(img/11.jpg);"></li>
			</ul>
			<p></p>
		</div>
		
		<script src="jquery-1.8.3.js"></script>
		<script>
		$(function(){
			var oL = $('#wrap ul li').size();
			var Deg = 360/oL;
			var xDeg = 0,yDeg = -10,xs,ys,p=null;

			for (var i=oL-1;i>=0;i--)
			{
				
				$('#wrap ul li').eq(i).css({
					transition:"1s "+(oL-i)*0.15+"s transform,.5s "+(1+oL*0.15)+"s opacity",
					'transform':'rotateY('+Deg*i+'deg) translateZ(350px)'
				});
			}
				
			
			$(document).mousedown(function(e){
				clearInterval(p);
				var x1 = e.clientX;
				var y1 = e.clientY;
				$(this).bind('mousemove',function(e){
					xs = e.clientX - x1;
					ys = e.clientY - y1;
					x1 = e.clientX;
					y1 = e.clientY;
					xDeg += xs*0.3;
					yDeg -= ys*0.1;
					$('#wrap').css('transform',"perspective(800px) rotateX("+yDeg+"deg) rotateY("+xDeg+"deg)");
				});
			}).mouseup(function(){
				$(this).unbind('mousemove');
				p = setInterval(function(){
					if(Math.abs(xs)<0.5&&Math.abs(ys)<0.5){clearInterval(p)};
					xs = xs*0.95;
					ys = ys*0.95
					xDeg += xs*0.3;
					yDeg -= ys*0.1;
					$('#wrap').css('transform',"perspective(800px) rotateX("+yDeg+"deg) rotateY("+xDeg+"deg)");
				},30);
			});
		
		});
		</script>
	</body>
</html>

竹一

关注

4
点赞
踩
12

收藏

觉得还不错? 一键收藏
12
评论
3D旋转相册

今天在知乎看到一个3d旋转相册，感觉不错，准备把源码贴这，分享给大家，给那些准备告白的人用。 3D相册拖拽动画 *{ margin:0; padding:0;} body{ background:#000; width:100%; height:100%; overflow:hidden} #wrap{ width:133px; h
复制链接

扫一扫