#bg {
    width: 100%;
    height: 350px;
    position: absolute;
    z-index: 1;
    /*border: 1px solid yellow;*/
}

#bg2 {
    height: 50;
    bottom: 0;
    position: absolute;
    width: 100%;
    /*border: 2px solid black;*/
}

#bg3 {
    height: 200;
    bottom: 0;
    z-index: 2;
    position: absolute;
    width: 100%;
    /*border: 2px solid red;*/
}

#containerCube {
    position: absolute;
    width: 100%;
    height: 100;
    /*border: 5px solid blue*/
}

#shape {
    margin: auto;
    /*border: 3px solid blue;*/
    width: 100px;
    height: 100px;
    -webkit-animation: spin 20s infinite linear;
    -webkit-transform-style: preserve-3d;
}

a img {
    opacity: 0.8;
    -webkit-transition: opacity 1s;
}

a:hover img {
    opacity: 1;
}

#shape>div {
    border: 1px solid #dcdcdc;
    position: absolute;
    width: 100px;
    height: 100px;
    -webkit-border-radius: 4px;
    -webkit-transition: -webkit-transform 2s;
}

#shape>div img {
    width: 100%;
    height: 100%;
}


/* This is where the 3D magic happens */

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotateY(0) rotateX(0);
    }
    to {
        -webkit-transform: rotateY(-360deg) rotateX(360deg);
    }
}


/* 3D positioning for each of the images/links */

.one {
    -webkit-transform: rotateX(90deg) translateZ(50px);
}

.two {
    -webkit-transform: translateZ(50px);
}

.three {
    -webkit-transform: rotateY(90deg) translateZ(50px);
}

.four {
    -webkit-transform: rotateY(180deg) translateZ(50px);
}

.five {
    -webkit-transform: rotateY(-90deg) translateZ(50px);
}

.six {
    -webkit-transform: rotateX(-90deg) translateZ(50px);
}