body
{
  background-repeat: no-repeat;
  background-origin: content-box;
  background-attachment: fixed;
  background-size:100% 100%;	
  user-select:none;
}
.nopadding
{
	padding:0px !important;
}
.wrapper{
  width:200px;
  height:200px;
  margin: 15% auto;
}
.box-area{
  animation: animate 10s ease-in-out infinite;
  transform-style: preserve-3d;
  transform-origin: 100px 100px 0;
}
.box-area div{
 position: absolute;
 width:200px;
 height:200px;
 line-height: 10vh;
}

.box-area .box1{
 background-image: url(images/sound.png);
background-size: cover;
background-position: center center;
transform: translateZ(100px);
}

.box-area .box2{
  background-image: url(images/Help.png);
 background-size: cover;
 background-position: center center;
 transform: rotateY(90deg) translateZ(100px)
 }

 .box-area .box3{
  background-image: url(images/Home.png);
 background-size: cover;
 background-position: center center;
 transform: rotateY(90deg) rotateX(90deg) translateZ(100px);
 }
 .box-area .box4{
  background-image: url(images/Play.png);
 background-size: cover;
 background-position: center center;
 transform: rotateY(180deg) rotateZ(90deg) translateZ(100px);

 }
 .box-area .box5{
  background-image: url(images/playAgain.png);
 background-size: cover;
 background-position: center center;
 transform: rotateY(-90deg) rotateZ(90deg) translateZ(100px);

 }
 .box-area .box6{
  background-image: url(images/credits.png);
 background-size: cover;
 background-position: center center;
 transform: rotateX(-90deg) translateZ(100px);

 }

@keyframes animate{
  from,to{
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  15%{
    transform: rotateY(-90deg);
  }
  30%{
    transform:rotateY(-90deg) rotateZ(90deg);
  }
  40%{
    transform:rotateY(-90deg) rotateZ(90deg);
  }
  50%{
    transform:rotateY(-180deg) rotateZ(90deg);
  }
  65%{
    transform:rotateY(-270deg) rotateX(90deg);
  }
  85%{
    transform:rotateX(90deg);
  }
}