body { background-color:black; }

img { width:100%; height:100%; }

.container{
	position: absolute;
	top:20%;
	left:35%;
	-webkit-perspective:2800px; 
	-webkit-perspective-origin:50% 50%; 
}

#cube{
	width: 400px;
	height: 400px;
	-webkit-animation:AnimCube 6s infinite linear; 
	-webkit-transform-style: preserve-3d; 
}

#cube div{
	position:absolute;
	width: 200px; /* Taille de chaque face */
	height: 200px;
	opacity:0.75;
	-webkit-transition: 5s;
}

#front{ -webkit-transform: translateZ(-100px); }
#back{	-webkit-transform: translateZ(100px); }
#left{ -webkit-transform: rotateY(-90deg) translateZ(100px); }
#right{ -webkit-transform: rotateY(90deg) translateZ(100px); }
#up{ -webkit-transform: rotateX(-90deg) translateZ(100px); }
#bottom{ -webkit-transform: rotateX(90deg) translateZ(100px); }

@-webkit-keyframes AnimCube { /* Animation pour Webkit (Chrome, Safari, Android, ...) */
  from { -webkit-transform: rotateX(0deg) rotateY(0deg); }
  to{ -webkit-transform: rotateX(360deg) rotateY(360deg); }
}

/* Décomposition du cube quand on passe la souris dessus */
#cube:hover #front{	-webkit-transform: translateZ(-150px);}
#cube:hover #back{ -webkit-transform: translateZ(150px);}
#cube:hover #left{ -webkit-transform: rotateY(-90deg) translateZ(150px); }
#cube:hover #right{ -webkit-transform: rotateY(90deg) translateZ(150px); }
#cube:hover #up{ -webkit-transform: rotateX(-90deg) translateZ(150px); }
#cube:hover #bottom{ -webkit-transform: rotateX(90deg) translateZ(150px); }