js结合css3做一个魔方效果？

javascript如何结合css3做一个魔方效果？下面web建站小编给大家介绍一下实现代码！

css代码：

*{
  margin: 0;
  padding: 0;
}
body{
  width: 100%;
  height: 100%;
  background: radial-gradient(#fff,pink);
}
.container{
  width: 300px;
  height: 300px;
  margin:150px auto;
  perspective: 20000px;
}
.box{
  width: 300px;
  height: 300px;
  border:1px solid transparent;
  box-sizing: border-box;
  position:relative;
  transform-style: preserve-3d;
  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);
}
.left{
  transform: translateX(-150px) rotateY(-90deg);
}
.right{
  transform: translateX(150px) rotateY(90deg);
}
.before{
  transform: translateY(150px) rotateX(-90deg);
}
.after{
  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;
}
@keyframes rotatey{
  20%{
  	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;
  }
}
.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%{
  	transform: rotateX(540deg);
  	background-size: 100px 100px;
  }
  60%{
  	transform: rotateX(540deg);
  	background-size: 100px 100px;
  }
  80%{
  	transform: rotateX(0deg);
  	background-size: 300px 300px;
  }
}

html代码：

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

js代码：

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:2px solid #fff; box-sizing:border-box;position:absolute; background-image:url(imgs/a"+n+".jpg); background-size:300px 300px;"    ;
      arr[n].appendChild(divs);
      divs.style.left=j*100+"px";
      divs.style.top=i*100+"px";
      divs.style.backgroundPositionX=-j*100+"px";
      divs.style.backgroundPositionY=-i*100+"px";
    }
  }
}

本文链接：http://so.lmcjl.com/news/19108/