body{
position: absolute; width: 500px; height: 500px; top: 50%; left: 50%; margin-left: -250px; margin-top: -250px;
-webkit-perspective:1000px;
   -moz-perspective:1000px;
    -ms-perspective:1000px;
     -o-perspective:1000px;
        perspective:1000px;
/* <-NB */
}

#faviconne{
  margin-left: -300px;
}

/*Container*/
.cube{
  margin-top: 50px;
/*transition*/
-webkit-transition:-webkit-transform 10.00s;
   -moz-transition:   -moz-transform 10.00s;
     -o-transition:     -o-transform 10.00s;
        transition:        transform 10.00s;
/*transform-style*/
-webkit-transform-style:preserve-3d;
   -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
     -o-transform-style:preserve-3d;
        transform-style:preserve-3d;
}

/* The faces */
.present1,.present2,.present3,.past1,.past2,.past3,.future1,.future2,.future3{
position:absolute;
height:400px;
width:400px;
text-align:center;

border-radius: 300px;
-moz-border-radius: 300px;
-o-border-radius: 300px;
-ms-border-radius: 300px;
-webkit-border-radius: 300px;

font-size: 47px; 
color: rgba(255, 255, 255, 0.4);
}
/*mouseover*/
.cube:hover{
-webkit-transform:rotateY(100000deg) translateX(200px) translateZ(200px);
   -moz-transform:rotateY(100000deg) translateX(200px) translateZ(200px);
    -ms-transform:rotateY(100000deg) translateX(200px) translateZ(200px);
     -o-transform:rotateY(100000deg) translateX(200px) translateZ(200px);
        transform:rotateY(100000deg) translateX(200px) translateZ(200px);
}

/* Position the faces*/
.present1{
-webkit-transform:rotateY(0deg);
   -moz-transform:rotateY(0deg);
    -ms-transform:rotateY(0deg);
     -o-transform:rotateY(0deg);
        transform:rotateY(0deg);
background-color:rgba(255, 0, 0, 0.2);

text-align:center;
font-family:arial;
}
.present2{

-webkit-transform:rotateY(60deg);
   -moz-transform:rotateY(60deg);
    -ms-transform:rotateY(60deg);
     -o-transform:rotateY(60deg);
        transform:rotateY(60deg);
background-color:rgba(0, 255, 0, 0.2);

text-align:center;
font-family:arial;
}
.present3{
-webkit-transform:rotateY(120deg);
   -moz-transform:rotateY(120deg);
    -ms-transform:rotateY(120deg);
     -o-transform:rotateY(120deg);
        transform:rotateY(120deg);

text-align:center;
font-family:arial;
background-color:rgba(0, 0, 255, 0.2);
}

.past1{
-webkit-transform:rotateY(20deg);
   -moz-transform:rotateY(20deg);
    -ms-transform:rotateY(20deg);
     -o-transform:rotateY(20deg);
        transform:rotateY(20deg);
background-color:rgba(255, 0, 0, 0.2);

text-align:center;
font-family:arial;
}
.past2{
-webkit-transform:rotateY(80deg);
   -moz-transform:rotateY(80deg);
    -ms-transform:rotateY(80deg);
     -o-transform:rotateY(80deg);
        transform:rotateY(80deg);
background-color:rgba(0, 255, 0, 0.2);

text-align:center;
font-family:arial;
}
.past3{
-webkit-transform:rotateY(140deg);
   -moz-transform:rotateY(140deg);
    -ms-transform:rotateY(140deg);
     -o-transform:rotateY(140deg);
        transform:rotateY(140deg);

text-align:center;
font-family:arial;
background-color:rgba(0, 0, 255, 0.2);
}

.future1{
-webkit-transform:rotateY(40deg);
   -moz-transform:rotateY(40deg);
    -ms-transform:rotateY(40deg);
     -o-transform:rotateY(40deg);
        transform:rotateY(40deg);
background-color:rgba(255, 0, 0, 0.2);

text-align:center;
font-family:arial;
}
.future2{
-webkit-transform:rotateY(100deg);
   -moz-transform:rotateY(100deg);
    -ms-transform:rotateY(100deg);
     -o-transform:rotateY(100deg);
        transform:rotateY(100deg);
background-color:rgba(0, 255, 0, 0.2);

text-align:center;
font-family:arial;
}
.future3{
-webkit-transform:rotateY(160deg);
   -moz-transform:rotateY(160deg);
    -ms-transform:rotateY(160deg);
     -o-transform:rotateY(160deg);
        transform:rotateY(160deg);

text-align:center;
font-family:arial;
background-color:rgba(0, 0, 255, 0.2);
}