
html,body{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1500px;
    background-color: #E0BBE4;
}

.cube{
    transform-style: preserve-3d;
    position: relative;
    width: 500px;
    height: 500px;
    transform: rotateX(10deg) rotateY(20deg);
    
}

.side{
    position: absolute;
      width: 500px;
    height: 500px;

}

.front.side{
    background-color: #FFFACD;
    transform: translateZ(250px);
}

.back.side{
    background-color: #FFDAB9;
      transform: translateZ(-250px);
}

.right.side{
    background-color: #E6E6FA;
      transform: translatex(250px) rotateY(90deg);
}

.left.side{
    background-color: #D1F2EB;
      transform: translatex(-250px) rotateY(90deg);
}


.top.side{
    background-color: #AEDFF7;
      transform: translatey(-250px) rotatex(90deg);
}

.bottom.side{
    background-color: #FFC1CC;
      transform: translatey(250px) rotatex(-90deg);
}

@keyframes rotate-cube {
    0% {transform: rotatex(45deg) rotateY(45deg);}
    25% {transform: rotatex(-45deg) rotateY(45deg);}
    50% {transform: rotatex(-45deg) rotateY(-45deg);}
    75% {transform: rotatex(45deg) rotateY(-45deg);}
    100% {transform: rotatex(45deg) rotateY(45deg);}
}

.cube{
    animation: rotate-cube 20s linear infinite;
}