web前端开发--爱情魔方

最新推荐文章于 2022-11-21 15:00:24 发布

UpMing!

最新推荐文章于 2022-11-21 15:00:24 发布

阅读量844

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/wmy0536/article/details/106451052

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用css js 实现动态的爱情魔方

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>UpMing</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.container{
			width: 300px;
			height:  300px;
			perspective: 2000px;
			/*border:  1px solid aqua;*/
			margin: 150px auto;
			}
			.box{
				width: 300px;
				height:  300px;
				transform-style: preserve-3d;
				/*transform : rotateX(45deg) rotateY(45deg) ;*/
			animation: ro 4s  linear infinite;
			}
	
			@keyframes ro{
		0%{
		transform : rotateX(0deg) rotateY(0deg)  ;
			}
		100%{
		transform : rotateX(360deg) rotateY(360deg)  ;
			}
	}
	
			.box-page{
				width: 300px;
				height:  300px;
				position:  absolute;
				transform-style: preserve-3d;
			}
			.after{
					transform: translateY(-150px) rotateX(90deg);		
			}
			.bottom{
				
					transform: translateZ(-150px) rotateX(180deg);
			}
			.top{
			
				transform: translateZ(150px);
			}	
			.before{
			
				transform: translateY(150px) rotateX(-90deg) ;
			
			}	
			.right{
				transform: translateX(150px) rotateY(90deg);
				}
			.left{
				transform: translateX(-150px) rotateY(-90deg);
			}
			.box-page div:nth-child(1)
			{
				animation: a1 4.5s ease-in;
			}
			.box-page div:nth-child(2)
			{
				animation: a1 4.5s ease-in 0.5s;
			}
			.box-page div:nth-child(3)
			{
				animation: a1 4.5s ease-in 1s;
			}
			.box-page div:nth-child(4)
			{
				animation: a1 4.5s ease-in 1.5s;
			}
			.box-page div:nth-child(5)
			{
				animation: a1 4.5s ease-in 2s;
			}
			.box-page div:nth-child(6)
			{
				animation: a1 4.5s ease-in 2.5s;
			}
			.box-page div:nth-child(7)
			{
				animation: a1 4.5s ease-in 3s;
			}
			.box-page div:nth-child(8)
			{
				animation: a1 4.5s ease-in 3.5s;
			}
			.box-page div:nth-child(9)
			{
				animation: a1 4.5s ease-in 4s;
			}
			
			@keyframes a1{
						0%{
							transform: translateZ(0px) scale(1) rotateZ(0deg)  ;
						}
					20%{
						transform: translateZ(300px) scale(0) rotateZ(720deg);
					}
				90%{
					transform: translateZ(300px) scale(0) rotateZ(720deg) ;
				}
				100%{
					transform: translateZ(0px) scale(1) rotateZ(0deg) ;
				}
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="box">
				<div class="box-page top"></div>
				<div class="box-page bottom"></div>
				<div class="box-page left"></div>
				<div class="box-page right"></div>
				<div class="box-page before"></div>
				<div class="box-page after"></div>
			</div>
		</div>
		<script type="text/javascript">
			var arr = document.querySelectorAll(".box-page");
				for(var n =0;n<arr.length;n++)
				{
					for(var i=0 ;i<3 ;i++)
							{
								for(var j=0;j<3; j++)	
								{
									var divs = document.createElement("div");
									divs.style.cssText= "width: 100px ;height: 100px ;border: 1px solid #fff; box-sizing : border-box ; position: absolute; background-image: url(img/"+n+".jpg); background-size: 300px 300px; "
									arr[n].appendChild(divs);
									divs.style.left=j*100+"px";
									divs.style.top=i*100+"px";
									divs.style.backgroundPositionX=-j*100+"px";
									divs.style.backgroundPositionY=-i*100+"px";
								}									
							}
				}	
		</script>
	</body>
</html>

UpMing!

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web前端开发--爱情魔方

用css js 实现动态的爱情魔方<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>UpMing</title> <style type="text/css"> *{ margin: 0; padding: 0; } .container{ width: 300px; height: 300p
复制链接

扫一扫