.cuboid {
    position: absolute;
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
 }



 .cuboid.axis .cuboid-side {
    background-color:rgba(255, 255, 255, 0.4);
 }



 .cuboid.animated .cuboid-side {

 }


.cuboid .cuboid-side {
    transform-origin: 0 0;
    background-color: rgba(200,200,200, 0.7);
    border: solid 1px #333;


    transform-style: preserve-3d;
    box-sizing: border-box;
    position: absolute;
    backface-visibility: visible;
}


/*
.cuboid:hover .cuboid-side {
    border: solid 3px #333;
}
*/



.cuboid .cuboid-side-top {
    top: 0;
}

.cuboid .cuboid-side-front {
}

.cuboid .cuboid-side-right {
    top: 0;
    left:100%;
}

.cuboid .cuboid-side-left {
    top: 0;
    left:0;
}

.cuboid .cuboid-side-back {
    top: 0;
}


.cuboid .cuboid-side-bottom {
    top: 100%;
}


.cuboid .side-top-content {
    position: absolute;
    width: 100%;
    height:100%;
}


.cuboid-wrapper {
    position: absolute;
}


.cuboid .side-top-content {
    font-size: 100px;
    text-align: center;
}