旋转魔方.html

最新推荐文章于 2024-05-11 18:00:55 发布

一牧.log

最新推荐文章于 2024-05-11 18:00:55 发布

阅读量816

点赞数 29

分类专栏： web 文章标签： html css3 css javascript

本文链接：https://blog.csdn.net/qq_55879366/article/details/136459306

版权

web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何使用HTML、CSS和JavaScript创建一个可交互的魔方模型，用户可以自定义图片并实现3D旋转。通过修改背景图片URL和CSS样式，实现了不同图片在六个面的动态切换和缩放效果。

摘要由CSDN通过智能技术生成

旋转魔方.html

编码：HTML+CSS+JavaScript

介绍

1.简介：旋转魔方，可以自己将图片放在魔方的六个面，每个面是九宫格形状
2.使用：下载即可打开，但是看不到图片，需要在此HTML网页文件同一级目录下创建图片文件夹存放图片（具体路径自定义修改）
3.修改：打开网页编辑器，代码行数164行如下：

divs.style.cssText = "width:100px;height:100px;border: 1px solid #fff;box-sizing:border-box;position:absolute;background-image:url(img/c"+n+".jpg);background-size:300px 300px;";

需要修改 background-image:url(img/c"+n+".jpg); 此背景图片信息，改为自己的图片路径就行
注意：六张图片需要根据顺序排列才可以遍历哦！！！

效果
魔方静态图片展示1

CODE


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>魔方</title>
	<style type="text/css">
			*{margin: 0px;
				padding: 0px;}
				body{background-color: rgba(223,74,38,0.7);}
			.container{
				width: 300px;
				height: 300px;
			
				margin: 200px auto;
				/* 视图距离*/
				perspective:2000px;
			}
			.box{
				width: 300px;
				height: 300px;
				/* 控制子元素保持3D转换 */
				transform-style:preserve-3d;

				/* 测试代码	 */
				/* transform:rotateX(45deg) rotateY(45deg); */
				animation:so 20s linear infinite;/* 匀速一直转 */
			}
			@keyframes so{
				0%{
					transform:rotateX(0deg) rotateY(0deg);
				}
				100%{
					transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);
				}
			}
			.p{
				width: 300px;
				height: 300px;
				/* 位置初始化*/
				position: absolute;
				transform-style:preserve-3d;
			}
			.top{
				/* background-color: red; */
				transform:translateZ(150px); /*沿Z轴移动150px*/
			}
			.bottom{
				/* background-color: green; */
				transform:translateZ(-150px) rotateX(180deg);
			}
			.left{
				/* background-color: orange; */
				transform:translateX(-150px) rotateY(-90deg);
			}
			.right{
				/* background-color: pink; */
				transform:translateX(150px) rotateY(90deg);/*沿X轴移动150px，Y轴旋转90度*/
			}
			.before{
				/* background-color: blue; */
				transform:translateY(150px) rotateX(-90deg);
			}
			.after{
				/* background-color: yellow; */
				transform:translateY(-150px) rotateX(90deg);
			}
			.p div:nth-child(1){
					transform:rotateY(0deg) ;
					animation:a1 10s linear infinite;
			}
			.p div:nth-child(2){
					transform:rotateX(0deg);
		    animation:a2 10s linear infinite;
			}
			.p div:nth-child(3){
					transform:rotateY(0deg) ;
					animation:a1 10s linear infinite;
			}
			.p div:nth-child(4){
					transform:rotateX(0deg);
		    animation:a2 10s linear infinite;
			}
			.p div:nth-child(5){
					transform:rotateY(0deg) ;
					animation:a1 10s linear infinite;/* 匀速一直转 */
			}
			.p div:nth-child(6){
				transform:rotateX(0deg);
		    animation:a2 10s linear infinite;
			}
			.p div:nth-child(7){
				transform:rotateY(0deg) ;
					animation:a1 10s linear infinite;
			}
			.p div:nth-child(8){
					transform:rotateX(0deg);
		    animation:a2 10s linear infinite;
			}
			.p div:nth-child(9){
				transform:rotateY(0deg) ;
					animation:a1 10s linear infinite;
			}
			@keyframes a1{
				20%{							   /* scale(1) 缩放*/
					transform:rotateY(0deg);
					background-size: 300px 300px;
				}
				40%{
					transform:rotateY(540deg);
					background-size: 100px 100px;
				}
				60%{
					transform:rotateY(540deg);
					background-size: 100px 100px;
				}
				80%{
					transform:rotateY(0deg);
					background-size: 300px 300px;
				}
			}
				@keyframes a2{
			20%{
				transform: rotateX(0deg);
				background-size: 300px 300px;
			}
			40%{
			
				transform: rotateX(540deg);
				background-size: 100px 100px;
			}
			60%{
				
				transform: rotateX(540deg);
				background-size: 100px 100px;
			}
			80%{
				transform: rotateX(0deg);
				background-size: 300px 300px;
			}
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="box">
			<div class="p top"></div>
			<div class="p bottom"></div>
			<div class="p left"></div>
			<div class="p right"></div>
			<div class="p before"></div>
			<div class="p after"></div>
		 </div>
	</div>

		<script type="text/javascript">
		var arr=document.querySelectorAll(".p");
		for (var n=0;n<arr.length;n++){//遍历6个面中每一个面
		 			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/c"+n+".jpg);background-size:300px 300px;";
		 				arr[n].appendChild(divs);
		 				divs.style.left=i*100+"px";
		 				divs.style.top=j*100+"px";


		 				divs.style.backgroundPositionX=-i*100+"px";//背景图像定位
		 				divs.style.backgroundPositionY=-j*100+"px";

		 				}
		 			}
		}
		</script>
</body>
</html>