魔方
旋转魔方
老师授课的时候是将代码都写在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树！
