@keyframes rotation
{
    from
    {
        transform: rotate(0deg);
    }
    to
    {
        transform: rotateY(500deg) rotateZ(500deg) rotateX(180deg);
    }
}
.cube
{
    height:200px;
    width:200px;
    position:relative;
    margin:300px;
    transform-style:preserve-3d;
    perspective:10000px;
    /* transform:rotateX(25deg) rotateY(25deg); */

    animation-name: rotation;
    animation-timing-function: ease-in-out;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.face
{
    height:100%;
    width:100%;
    position:absolute;
    top:10%;
    bottom:10%;
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.one
{
    background-color: darkred;
}
.two
{
    background-color: deeppink;
    transform: rotateY(90deg) translateZ(-100px) translateX(-100px);
}
.three
{
    background-color: rgb(47, 0, 255);
    transform: rotateX(90deg) translateY(100px) translateZ(-100px);
}
.four
{
    background-color: rgb(255, 0, 0);
    transform: rotateY(90deg) translateZ(100px) translateX(-100px);
}
.five
{
    background-color: rgb(0, 255, 13);
    transform: rotateX(90deg) translateZ(100px) translateY(100px);
}
.six
{
    background-color: rgb(183, 0, 255);
    transform: translateZ(200px);
}
.shadowed
{
    box-shadow: 0px 0px 20px 15px white;
}