3d悬浮效果

hd564964
hd564964 发布于 2017-02-15 15:54:35 浏览:2751 类型:原创 - 随笔 分类:HTML/CSS - css3 二维码: 作者原创 版权保护
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0; padding: 0;}
			ul,li{list-style: none;}
			.container{perspective: 1300;-webkit-perspective:1300;}
			.boxList{position:absolute;width: 630px;height:630px;left:50%;margin-left:-315px; -webkit-transform-style: preserve-3d;transform-style: preserve-3d;/*animation: a1 2s 1;*/transition: all 2s;}
			.boxList li{float: left;width: 200px;height: 200px;margin:5px;background: darkcyan;-webkit-transition: all 0.3s;transition: all 0.3s 0.1s;}
			.on li:hover{-webkit-transform: translate3d(0,0,30px);transform: translate3d(0,0,30px);background:deepskyblue;box-shadow: 30px 30px 10px rgba(0, 0, 0, 0.5);}
			.on{webkit-transform: rotateX(75deg) rotateY(0deg) rotateZ(45deg);transform: rotateX(75deg) rotateY(0deg) rotateZ(45deg);}
		</style>
	</head>
	<body>
		<div class="container">
			<ul class="boxList">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
	<script>
		var list=document.querySelector('.boxList');
		window.onload=function(){
			setInterval(transition,1000)
			
		}
		function transition(){
			list.className='on boxList';
		}
	</script>
</html>
标签:
z
给个赞 49 人点赞
收藏 83 人收藏
评论 已有 8 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
福州爱
福州爱2017-03-01 10:08:108F
支持IE浏览器几的版本呢
举报 支持 (0) 回复 (0)
leewenhua先森
leewenhua先森2017-02-22 17:19:397F
这波可以 //@lyj4532556:加上图片,弄个圆角会不会好看点呢展开代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0; padding: 0;}
			ul,li{list-style: none;}
			.container{perspective: 1300;-webkit-perspective:1300;}
			.boxList{position:absolute;width: 630px;height:630px;left:50%;margin-left:-315px; -webkit-transform-style: preserve-3d;transform-style: preserve-3d;/*animation: a1 2s 1;*/transition: all 2s;}
			.boxList li{float: left;width: 200px;height: 200px;margin:5px;background: darkcyan;-webkit-transition: all 0.3s;transition: all 0.3s;border-radius:6px;overflow:hidden;}
			.boxList li img{max-width:100%;height:100%;}
			.on li:hover{-webkit-transform: translate3d(0,0,30px);transform: translate3d(0,0,30px);background:deepskyblue;box-shadow: 30px 30px 10px rgba(0, 0, 0, 0.5);}
			.on{webkit-transform: rotateX(75deg) rotateY(0deg) rotateZ(45deg);transform: rotateX(75deg) rotateY(0deg) rotateZ(45deg);}
		</style>
	</head>
	<body>
		<div class="container">
			<ul class="boxList">
				<li><img src="http://p.xincheping.com/201702/54/dim600x400_583f7aa30c41f1b66ae10423654575_309.jpg"></li>
				<li><img src="http://p.xincheping.com/201702/af/dim620x413_2ee406f916484387088ac3faddab01_309.jpg"></li>
				<li><img src="http://p.xincheping.com/201702/82/dim600x400_4b8a7d7d954b3c9d8beec557c8e0b8_309.jpg"></li>
				<li><img src="http://p.xincheping.com/201702/44/dim600x400_2896a18cd049c482801ac411f252cd_309.jpg"></li>
				<li><img src="http://p.xincheping.com/201702/8d/dim600x400_9735b09d544c27926a41dd1d423d4a_309.jpg"></li>
				<li><img src="http://p.xincheping.com/201702/a4/dim600x400_8b3a80a9074a80a12b41978d864cf4_309.jpg"></li>
				<li><img src="http://p.xincheping.com/201702/4f/dim600x400_c78164dc6446a2923718c18119a820_309.jpg"></li>
				<li><img src="http://p.xincheping.com/201702/9c/dim600x400_432d837e564e2bb2f47e21e33e388b_309.jpg"></li>
				<li><img src="http://p.xincheping.com/201702/0d/dim600x400_b61ebb6e924a949d357c0668e52c9a_309.jpg"></li>
			</ul>
		</div>
	</body>
	<script>
		var list=document.querySelector('.boxList');
		window.onload=function(){
			setInterval(transition,1000)
			
		}
		function transition(){
			list.className='on boxList';
		}
	</script>
</html>
举报 支持 (0) 回复 (0)
hd564964
hd5649642017-02-20 10:09:206F
鼠标经过闪的问题在过渡动画上加0.1s延迟就好了
举报 支持 (0) 回复 (0)
hd564964
hd5649642017-02-20 10:04:565F
鼠标经过li边缘的时候 li位置会变化 会出现闪的问题  在想怎么解决 //@Joudee:你没发现鼠标移上去的位置不准吗
举报 支持 (0) 回复 (0)
Lin_Grady
Lin_Grady2017-02-17 15:40:124F
效果酷炫,重点代码少
举报 支持 (0) 回复 (0)
Joudee
Joudee2017-02-17 13:57:533F
你没发现鼠标移上去的位置不准吗
举报 支持 (0) 回复 (1)
lyj4532556
lyj45325562017-02-16 09:19:072F
加上图片,弄个圆角会不会好看点呢展开代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0; padding: 0;}
			ul,li{list-style: none;}
			.container{perspective: 1300;-webkit-perspective:1300;}
			.boxList{position:absolute;width: 630px;height:630px;left:50%;margin-left:-315px; -webkit-transform-style: preserve-3d;transform-style: preserve-3d;/*animation: a1 2s 1;*/transition: all 2s;}
			.boxList li{float: left;width: 200px;height: 200px;margin:5px;background: darkcyan;-webkit-transition: all 0.3s;transition: all 0.3s;border-radius:6px;overflow:hidden;}
			.boxList li img{max-width:100%;height:100%;}
			.on li:hover{-webkit-transform: translate3d(0,0,30px);transform: translate3d(0,0,30px);background:deepskyblue;box-shadow: 30px 30px 10px rgba(0, 0, 0, 0.5);}
			.on{webkit-transform: rotateX(75deg) rotateY(0deg) rotateZ(45deg);transform: rotateX(75deg) rotateY(0deg) rotateZ(45deg);}
		</style>
	</head>
	<body>
		<div class="container">
			<ul class="boxList">
				<li><img src="http://p.xincheping.com/201702/54/dim600x400_583f7aa30c41f1b66ae10423654575_309.jpg"></li>
				<li><img src="http://p.xincheping.com/201702/af/dim620x413_2ee406f916484387088ac3faddab01_309.jpg"></li>
				<li><img src="http://p.xincheping.com/201702/82/dim600x400_4b8a7d7d954b3c9d8beec557c8e0b8_309.jpg"></li>
				<li><img src="http://p.xincheping.com/201702/44/dim600x400_2896a18cd049c482801ac411f252cd_309.jpg"></li>
				<li><img src="http://p.xincheping.com/201702/8d/dim600x400_9735b09d544c27926a41dd1d423d4a_309.jpg"></li>
				<li><img src="http://p.xincheping.com/201702/a4/dim600x400_8b3a80a9074a80a12b41978d864cf4_309.jpg"></li>
				<li><img src="http://p.xincheping.com/201702/4f/dim600x400_c78164dc6446a2923718c18119a820_309.jpg"></li>
				<li><img src="http://p.xincheping.com/201702/9c/dim600x400_432d837e564e2bb2f47e21e33e388b_309.jpg"></li>
				<li><img src="http://p.xincheping.com/201702/0d/dim600x400_b61ebb6e924a949d357c0668e52c9a_309.jpg"></li>
			</ul>
		</div>
	</body>
	<script>
		var list=document.querySelector('.boxList');
		window.onload=function(){
			setInterval(transition,1000)
			
		}
		function transition(){
			list.className='on boxList';
		}
	</script>
</html>
举报 支持 (0) 回复 (1)
zyy6681
zyy66812017-02-15 16:14:261F
挺好的,
举报 支持 (0) 回复 (0)
hd564964 hd564964 作者

作者最新