爱情魔方，表白神器

爱情魔方，前端程序员也可以很浪漫

首先我们用到的都是前端最常用的技术，先不看代码，我们先来看运行效果。

那我们就来看一看一个完整的过程。正方体有六个面，所以我们需要6个元素，但除此之外，我们还要控制它的旋转和倾斜，于是我们一共需要定义八个div模板。
每一个元素我们使用一个div标签来显示，由于都是初学者因此所有关于HTML的知识我都会细讲一遍。div用于定义文档中的某一个区间或者说某一个节，以方便后边对这个节进行加工或者各种各样的处理，其实div在文档中的作用和span在段落中的作用是一样的，只不过span只能作用在某一行里，div作用在整个文档里。关于div的属性，在初学者眼里关于name，class，id这三个可能就会有一点混淆，在这里我简单解释一下，name，是指定标签的名称，就像你叫小红，她叫小明一样，id是一个标签的唯一标识，就像每一个人的身份证一样，是唯一的，class是一个类选择器，和id不同的是，id在整个网页中不允许存在相同名字，而class是允许的，因此class可以对好几个元素进行同一个操作。好，回归正题，我们定义了八个div元素之后（div元素的树状关系我就不多解释了，看代码应该可以看得懂），我们给每一个div模板都定义上了不同的class，并给上不同的名字，在这里可能很多人会好奇为什么我在这里不使用id而去使用class，因为每一个面都是有共性的，因此我们定义class可以很方便对六个面进行统一的设置而不用对每一个面进行单独的设置。

<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>

好了，定义完整体的框架以后，现在，我们在body里进行style的设计，然后我们分别来看这些代码都有什么意思和作用，*就是对全局标签的一个定义，margin就是当前边框到外边框的距离，padding就是当前边跨到内边框的距离，我们一般都会将两者定义为0，当然，有特殊需求的例外，往下看，,的意思就是一个类选择器，我们首先对container进行设置，设置这个魔方的长度和宽度都为300像素，perspective就是观看者的距离，接下来就是对box的设计，也就是box里的每一个元素的样式，也就是正方体的每一个面，我们都定义成300像素，然后下面的transform-style就设置为3d转化，下面的animation属性也就是选择动画效果，这个我们后面再介绍。

*{
   margin:0;
   padding:0;
  }
  .container{
   width:300px;
   height:300px;
   
   margin:150px auto;
   perspective: 6000px;
  }
  .box{
   width:300px;
   height:300px;
   /*控制子元素保持3d转化*/
   transform-style: preserve-3d;
   /*测试代码*/
   /*transform:rotateX(45deg) rotateY(45deg);*/
   animation:ro 4s linear infinite;
  }

接下来就是对每一个面的样子进行设计，我们是在box-page这个选择器下进行操作的，因此我们只需要选择后面的名字，比如,bottom，然后我们看前面的代码可以知道，现在的六个面都还是在这个平面上的同一个地方，因此我们需要将每一个面进行平移，平移用到3d坐标轴，因此没有了解过的小伙伴可以去了解一下，

.box-page{
   width:300px;
   height:300px;
   /*位置初始化*/
   position:absolute;
   transform-style: preserve-3d;
  }
  .top{
   /*background-color:red;*/
   transform: translateZ(150px);
  }
  .bottom{
   /*background-color:green;*/
   transform:translateZ(-150px) rotateY(180deg);
  }
  .left{
   /*background-color:orange;*/
   transform:translateX(-150px) rotateY(-90deg);
  }
  .right{
   /*background-color:pink;*/
   transform:translateX(150px) rotateY(90deg);
  }
  .before{
   /*background-color:blue;*/
   transform: translateY(150px) rotateX(-90deg);
  }
  .after{
   /*background-color:yellow;*/
   transform:translateY(-150px) rotateX(90deg);
  }

接下来就是对每一个面的效果进行操作了，我们用一个变量arr来保存box元素下的每一个子元素来保存到这个变量arr里面，每一个面我们又将其分为九个元素，因此我们使用了两次for循环来完成这个操作，在最内层for循环里面，我们又给一个新的变量定义一个每一个小面的元素名字div，并且规定了每一个小面的css样式并且将其赋值到arr变量里面

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

每一个元素我们都从左上角开始排列，于是就有了下面的代码

divs.style.left = 100*j+"px";
    divs.style.top = 100*i+"px";

对背景图片的定位应该也是这样，取负值的原因是背景图片是相对于原来的位置移动的

divs.style.backgroundPositionX = -j*100+"px";
    divs.style.backgroundPositionY = -i*100+"px";  

设置完背景图片和每一小块的位置完成后，我们应该设置他的动画效果了。
这个动画效果的作用是使他在小图的动画效果完成后转圈

 @keyframes ro{
   0%{
    transform:rotateX(0deg) rotateY(0deg);
   }
   100%{
    transform:rotateX(360deg) rotateY(360deg);
   }

这个动画效果的作用是使它不断转圈，scale的作用是放大和缩小
最后将动画效果插入到每一个对应的元素中就可以完成

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

第一次写这样的文章，写得不够好的地方希望大家原谅，接受大家的批评和指正，愿所有读者生活健康，每天开心。

这个是源码