#mainDiv {
    width: 300px;
    height: 300px;
    margin: 150px auto;
    perspective: 600px;
}

#boxDiv {
    transform-style: preserve-3d; 
    animation: rotate 15s linear infinite;
    position: absolute;
    width: 300px;
    height: 300px;
    opacity: 1.0;
    color: rgb(255, 255, 255);
}

#boxDiv div {
    position: absolute;
    width: 300px;
    height: 300px;
    opacity: 1.0;
    color: rgb(255, 255, 255);
}

#front {
    transform: translateZ(150px);
    border: 2px solid rgb(255, 255, 255);
}

#cubeface{
    position: absolute;
    width: 100%;
    word-break: keep-all;
}

#back {
    transform: rotateY(180deg) translateZ(150px);
    border: 2px solid rgb(255, 255, 255);   
}

#left {
    transform: rotateY(-90deg) translateX(-150px);
    transform-origin: left;
    border: 2px solid rgb(255, 255, 255);  
}

#right {
    transform: rotateY(90deg) translateX(150px);
    transform-origin: right;
    border: 2px solid rgb(255, 255, 255);   
}

#top {
    transform: rotateX(-90deg) translateY(-150px);
    transform-origin: top;
    border: 2px solid rgb(255, 255, 255);  
}

#bottom {
    transform: rotateX(90deg) translateY(150px);
    transform-origin: bottom;
    border: 2px solid rgb(255, 255, 255);   
}

@keyframes rotate {
    0% { transform: rotateY(0); }
    100% { transform: rotateY(360deg); }
}