3D魔方

.container {width:300px; height:auto;margin:100px auto; position:relative; transform-style:preserve-3d;animation:mymove 8s linear 0.1s infinite;   transform-origin: 50% 50%;

   backface-visibility: hidden;}

@keyframes mymove

{

0% {transform:rotateX(360deg)rotateY(360deg) translateZ(10em);}

100% {transform:rotateX(-180deg)rotateY(-360deg) translateZ(0em);}

}

.cell {width:296px; height:296px;position:absolute; top:0;}

.div1 {transform:translateZ(150px);}

.div2 {transform:rotateY(90deg)translateZ(150px);}

.div3{transform:rotateX(90deg)translateZ(150px);}

.div4 {transform:rotateY(-90deg)translateZ(150px);}

.div5 {transform:rotateX(-90deg)translateZ(150px);}

.div6 {transform:rotateY(180deg)translateZ(150px);}

 

.div1 > div {background:LightSlateBlue;width:90px; height:90px; border:3px solid white; border-radius:10px;float:left;}

.div2 > div {background:LightCoral;width:90px; height:90px; border:3px solid white; border-radius:10px;float:left;}

.div3 > div {background:DeepSkyBlue;width:90px; height:90px; border:3px solid white; border-radius:10px;float:left;}

.div4 > div {background:DarkTurquoise;width:90px; height:90px; border:3px solid white; border-radius:10px;float:left;}

.div5 > div {background:HotPink;width:90px; height:90px; border:3px solid white; border-radius:10px;float:left;}

.div6 > div {background:GreenYellow;width:90px; height:90px; border:3px solid white; border-radius:10px;float:left;}

 

.cell > div:nth-child(2) {margin:0 4px4px 4px;}

.cell > div:nth-child(5) {margin:0 4px4px 4px;}

.cell > div:nth-child(8) {margin:0 4px4px 0;}

.cell > div:nth-child(1){margin-bottom:4px;}

.cell > div:nth-child(3){margin-bottom:4px;}

.cell > div:nth-child(4){margin-bottom:4px;}

.cell > div:nth-child(6){margin-bottom:4px;}

 

 

<div class="container">

<div class="cell div1">

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

</div>

<div class="cell div2">

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

</div>

<div class="cell div3">

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

</div>

<div class="cell div4">

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

</div>

<div class="cell div5">

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

</div>

<div class="cell div6">

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

</div>

</div>