css+js 实现炫酷的魔方旋转

最新推荐文章于 2024-01-29 09:53:05 发布

JayBOLT

最新推荐文章于 2024-01-29 09:53:05 发布

阅读量576

点赞数 1

分类专栏： web前端文章标签： html js css

本文链接：https://blog.csdn.net/qq_44047479/article/details/109602411

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

魔方的简单旋转

（后续会有进阶版）
先附上效果图（图片大小限制，效果图不是很明显）
在这里插入图片描述
图片可以在img文件夹中自己添加（注意命名格式）
关于魔方图片代码位置如下图显示（在script部分）

这是命名格式（本人杰伦粉QAQ）

html部分


<!DOCTYPE html>
<html>
<head>
	<title>魔方</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css1.css">
</head>
<body>
<div class="container">
	<div class="box">
		<div class="top box-page"></div>
		<div class="bottom box-page"></div>
		<div class="left box-page"></div>
		<div class="right box-page"></div>
		<div class="before box-page"></div>
		<div class="after box-page"></div>
	</div>
</div>
<script type="text/javascript">	
	var arr = document.querySelectorAll(".box>div");
	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;position:absolute;box-sizing:border-box;background-image:url(img/a"+n+".jpg);background-size: 300px 300px;";
				arr[n].appendChild(divs);
				// 改变每一个div的位置
				divs.style.left = 100*j+"px";
				divs.style.top = 100*i+"px";
				// 改变背景图相应的位置
				divs.style.backgroundPositionX = -j*100+"px";
				divs.style.backgroundPositionY = -i*100+"px";		
			}
		}
	}
</script>
</body>
</html>

css代码部分
（保存成.css1文件）

*{
			margin: 0;
			padding: 0;
		}
		body{
		  width: 100%;
		  height: 100%;
		  background: radial-gradient(#fff, red); 
		}
		.container{
			width:300px;
			height:300px;
			margin:200px auto;
			perspective:2000px;
		}
		.box{
			width:300px;
			height:300px;
			border:1px solid transparent;
			box-sizing: border-box;
			position:relative;
			transform-style:preserve-3d;
			/*transform:rotateX(30deg) rotateY(30deg);*/
			animation: rotate 10s linear infinite;
		}
		@keyframes rotate{
			100%{
				transform:rotatex(360deg) rotatey(360deg) rotatez(360deg);
			}
		}

		.box-page{
			width: 300px;
			height: 300px;
			position:absolute;
			box-sizing: border-box;
			transform-style:preserve-3d;
		}
		.top{
			transform: translateZ(150px);
		}
		.bottom{
			transform: translateZ(-150px) rotateX(180deg);
		}
		.right{
			transform: translateX(150px) rotateY(90deg);
		}
		.left{
			transform: translateX(-150px) rotateY(-90deg);
		}
		.after{
			transform: translateY(-150px) rotateX(90deg);
		}
		.before{
			transform: translateY(150px) rotateX(-90deg);
		}
		/*.box-page div:first-child,.box-page div:nth-child(3),.box-page div:nth-child(5),.box-page div:nth-child(7),.box-page div:nth-child(9){
			transform: rotateY(0deg);
		    animation: rotatey 6s linear infinite;
		}*/
		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 o.5s;
}
.box-page div:nth-child(6){
animation:a1 4.5s ease-in 0.5s;
}
.box-page div:nth-child(7）（
animation：a1 4.5s ease-in 0.5s;
}
.box-page div:nth-child(8){
animation：a1 4.5s ease-in 0.5s;

		@keyframes rotatey{
			20%{
				transform: rotateY(0deg);
				background-size: 300px 300px;
			}
			40%{
				/*background-image: url("img/img.jpg");*/
				transform: rotateY(540deg);
				background-size: 100px 100px;
			}
			60%{
				/*background-image: url("img/img.jpg");*/
				transform: rotateY(540deg);
				background-size: 100px 100px;
			}
			80%{
				transform: rotateY(0deg);
				background-size:300px 300px;
			}
		}

		.box-page div:nth-child(2),.box-page div:nth-child(4),.box-page div:nth-child(6),.box-page div:nth-child(8){
			transform:rotateX(0deg);
		    animation: rotatex 6s linear infinite;
		}

		@keyframes rotatex{
			20%{
				transform: rotateX(0deg);
				background-size: 300px 300px;
			}
			40%{
				/*background-image: url("img/img.jpg");*/
				transform: rotateX(540deg);
				background-size: 100px 100px;
			}
			60%{
				/*background-image: url("img/img.jpg");*/
				transform: rotateX(540deg);
				background-size: 100px 100px;
			}
			80%{
				transform: rotateX(0deg);
				background-size: 300px 300px;
			}
		}

关于魔方旋转的进阶版，后续会更新，敬请期待，感谢支持。