魔方

旋转魔方

老师授课的时候是将代码都写在html中，为了今后更好地熟练掌握html与css以及js文件之间的联系，我将代码分开编写了。

html文档中：

 <link rel="stylesheet" type="text/css" href="css/***.css">

 <script type="text/javascript" src="js/***.js">JS</script>

HTML

 <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>JS学习-魔方</title>
	<link rel="stylesheet" type="text/css" href="css/***.css">
</head>
<body>
<!-- 容器 -->
<div id="container">
	<!-- 父元素，舞台box -->
	<div id="box">
		<!-- 父容器6个box-page -->
		<div class="box-page top"></div>
		<div class="box-page bottom"></div>
		<div class="box-page right"></div>
		<div class="box-page left"></div>		
		<div class="box-page front"></div>
		<div class="box-page back"></div>
	</div>
</div>
<script type="text/javascript" src="js/***.js">JS</script>
</body>
</html>

div是一个块级元素；

一个容器、一个舞台——魔方，div选用id属性；

6个父容器——魔方的六个面，div选用class类，设计小技巧：每个都设为box-page+位置。

CSS

 *{
	margin: 0;
	padding: 0;
}
#body{}
#container{
	width: 400px;
	height: 400px;
	border: 1px solid #fff;
	/*上下150 居中*/
	margin: 150px auto;
}
#box{
	width: 400px;
	height: 400px;
	/*控制子元素保持3d转换*/
	transform-style: preserve-3d;
	/*测试代码*/
	/*transform: rotateX(45deg) rotateY(45deg);*/
	animation: ro 4s linear infinite;
	/*有透视*/
	/*perspective: 100px;*/
}
/*设置动画*/
@keyframes ro{
	0%{
		transform: rotateX(0deg) rotateY(0deg);
	}
	100%{
		transform: rotateX(360deg) rotateY(360deg);
	}
}
/*通用样式*/
.box-page{
	width: 400px;
	height: 400px;
	position: absolute;
	/*控制子元素保持3d转换*/
	transform-style: preserve-3d;
}
.top{
	/*background-color: red;*/
	transform: translateZ(200px);
}
.bottom{
	/*background-color: yellow;*/
	transform: translateZ(-200px) rotateX(180deg);
}
.right{
	/*background-color: green;*/
	transform: translateX(200px) rotateY(90deg);
}
.left{
	/*background-color: blue;*/
	transform: translateX(-200px) rotateY(-90deg);
}
.front{
	/*background-color: purple;*/
	transform: translateY(200px) rotateX(-90deg);
}
.back{
	/*background-color: brown;*/
	transform: translateY(-200px) rotateX(90deg);
}
 
.box-page div:nth-child(1){
	animation: a1 4s ease-in;
}
.box-page div:nth-child(2){
	animation: a1 4s ease-in 0.5s;
}
.box-page div:nth-child(3){
	animation: a1 4s ease-in 1s;
}
.box-page div:nth-child(4){
	animation: a1 4s ease-in 1.5s;
}
 
@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);
	}
}

设置容器#container、舞台#box、父容器.box-page的相关属性，确定魔方的大小以及它在页面的排布；

魔方每个面的排布，.top .bottom .right 等。

设置动画@keyframes+3d+transform

ro：魔方的旋转

a1：魔方每个面的飞起（这里是2*2，四个面）

呈现效果：（1）一个面每个小方块依次飞出去，飞回来；（2）舞台保持旋转；（3）如何重复（1）

JavaScript

 //每个面包含九个元素，每个图片表示的背景图片的位置是不一样的
var arr = document.querySelectorAll(".box-page");//获取文档中的元素
//遍历6个面
for (var n = 0 ; n < arr.length ; n++) {
	for(var r = 0 ; r < 2 ; r++){
		for(var c = 0 ; c < 2 ; c++){
			//创建元素
			var divs = document.createElement("div");
			divs.style.cssText = "width:200px; height:200px; border:2px solid #fff; box-sizing:border-box; position:absolute; background-image:url(images/a"+n+".jpg); background-size: 400px 400px ; "; 
	
			//距离左侧的距离，列数
			divs.style.left = c*200 + "px";
			//距离顶端的距离
			divs.style.top = r*200 + "px";
			//背景图像偏移：显示对应的图片，向左移动
			divs.style.backgroundPositionX = -c*200+"px";
			//向上移动
			divs.style.backgroundPositionY= -r*200+"px";
			
 
			//追加到面上，添加到dom树	
			arr[n].appendChild(divs);
		}
	}
}

魔方添加图片，for循环2*2遍历。

创建元素、每个方块的位置；

图片偏移，显示完整的图片。

！记得将上述内容添加到dom树！

posted on 2022-01-14 14:50 cookie的笔记簿阅读(47) 评论(1) 编辑收藏举报

魔方

旋转魔方

HTML

CSS

JavaScript

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>JS学习-魔方</title>
	<link rel="stylesheet" type="text/css" href="css/***.css">
	</head>
	<body>
	<!-- 容器 -->
	<div id="container">
	<!-- 父元素，舞台box -->
	<div id="box">
	<!-- 父容器6个box-page -->
	<div class="box-page top"></div>
	<div class="box-page bottom"></div>
	<div class="box-page right"></div>
	<div class="box-page left"></div>
	<div class="box-page front"></div>
	<div class="box-page back"></div>
	</div>
	</div>
	<script type="text/javascript" src="js/***.js">JS</script>
	</body>
	</html>

	*{
	margin: 0;
	padding: 0;
	}
	#body{}
	#container{
	width: 400px;
	height: 400px;
	border: 1px solid #fff;
	/上下150 居中/
	margin: 150px auto;
	}
	#box{
	width: 400px;
	height: 400px;
	/控制子元素保持3d转换/
	transform-style: preserve-3d;
	/测试代码/
	/transform: rotateX(45deg) rotateY(45deg);/
	animation: ro 4s linear infinite;
	/有透视/
	/perspective: 100px;/
	}
	/设置动画/
	@keyframes ro{
	0%{
	transform: rotateX(0deg) rotateY(0deg);
	}
	100%{
	transform: rotateX(360deg) rotateY(360deg);
	}
	}
	/通用样式/
	.box-page{
	width: 400px;
	height: 400px;
	position: absolute;
	/控制子元素保持3d转换/
	transform-style: preserve-3d;
	}
	.top{
	/background-color: red;/
	transform: translateZ(200px);
	}
	.bottom{
	/background-color: yellow;/
	transform: translateZ(-200px) rotateX(180deg);
	}
	.right{
	/background-color: green;/
	transform: translateX(200px) rotateY(90deg);
	}
	.left{
	/background-color: blue;/
	transform: translateX(-200px) rotateY(-90deg);
	}
	.front{
	/background-color: purple;/
	transform: translateY(200px) rotateX(-90deg);
	}
	.back{
	/background-color: brown;/
	transform: translateY(-200px) rotateX(90deg);
	}

	.box-page div:nth-child(1){
	animation: a1 4s ease-in;
	}
	.box-page div:nth-child(2){
	animation: a1 4s ease-in 0.5s;
	}
	.box-page div:nth-child(3){
	animation: a1 4s ease-in 1s;
	}
	.box-page div:nth-child(4){
	animation: a1 4s ease-in 1.5s;
	}

	@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);
	}
	}

	//每个面包含九个元素，每个图片表示的背景图片的位置是不一样的
	var arr = document.querySelectorAll(".box-page");//获取文档中的元素
	//遍历6个面
	for (var n = 0 ; n < arr.length ; n++) {
	for(var r = 0 ; r < 2 ; r++){
	for(var c = 0 ; c < 2 ; c++){
	//创建元素
	var divs = document.createElement("div");
	divs.style.cssText = "width:200px; height:200px; border:2px solid #fff; box-sizing:border-box; position:absolute; background-image:url(images/a"+n+".jpg); background-size: 400px 400px ; ";

	//距离左侧的距离，列数
	divs.style.left = c*200 + "px";
	//距离顶端的距离
	divs.style.top = r*200 + "px";
	//背景图像偏移：显示对应的图片，向左移动
	divs.style.backgroundPositionX = -c*200+"px";
	//向上移动
	divs.style.backgroundPositionY= -r*200+"px";


	//追加到面上，添加到dom树
	arr[n].appendChild(divs);
	}
	}
	}