body
/* {
background-color: cadetblue; 
}  */
body {
  -webkit-user-select: none;
     -moz-user-select: -moz-none;
      -ms-user-select: none;
          user-select: none;
}
.wrapper
{ 
width: 180px;
height: 208px;
margin: 3% 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: 200px;
} 

.box-area .box1 {
background-image: url(../imagesp/1.jpg);
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
transform: translateZ(100px); 
}

.box-area .box2 {
background-image: url(../imagesp/2.jpg);
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
transform: rotateY(90deg) translateZ(100px); 
}

.box-area .box3 {
background-image: url(../imagesp/3.jpg);
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
transform: rotateY(90deg) rotateX(90deg) translateZ(100px); 
}

.box-area .box4 {
background-image: url(../imagesp/2.jpg);
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
transform: rotateY(180deg) rotateZ(90deg) translateZ(100px); 
}

.box-area .box5 {
background-image: url(../imagesp/5.jpg);
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
transform: rotateY(-90deg) rotateZ(90deg) translateZ(100px); 
}

.box-area .box6 {
background-image: url(../imagesp/6.jpg);
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
transform: rotateX(-90deg) translateZ(100px); 
}


@keyframes animate{
from,to
{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); 
} 
16%
{
transform: rotateY(-90deg); 
}
33%
{
transform: rotateY(-90deg) rotateZ(90deg); 
}
50%
{
 transform: rotateY(-180deg) rotateZ(90deg); 
}
66%
{
 transform: rotateY(-270deg) rotateX(90deg); 
}
83%
{
 transform: rotateX(90deg); 
}

}