/* container */

#cube_box {
	position: absolute;
	top: 310px; 
	left: 45%; 
	padding: 0px 0px;
	border: none;
	background: none;
}

/* paramètres 3d */

#cube_a, #cube_b, #cube_c, #cube_d {
	width: 100px; 
	height: 100px;
	transform-style: preserve-3d;
}

#cube_a { perspective: 800px; }							/* profondeur de perspective */
#cube_b { animation: rotationX 6s ease infinite; }		/* durée de rotation autour de X */
#cube_c { animation: rotationY 8s ease infinite; }		/* durée de rotation autour de Y */
#cube_d { animation: rotationZ 10s ease infinite; }		/* durée de rotation autour de Z */

/* animation 3d */

@keyframes rotationX {
   from { transform: rotateX(40deg); }					/* angle de départ X */
   to 	{ transform: rotateX(400deg); }					/* angle d'arrivée (360 + angle de départ) */
}

@keyframes rotationY {
   from { transform: rotateY(20deg); }					/* angle de départ Y */
   to 	{ transform: rotateY(380deg); }					/* angle d'arrivée (360 + angle de départ) */
}

@keyframes rotationZ {
   from { transform: rotateZ(0deg); }					/* angle de départ Z */
   to 	{ transform: rotateZ(360deg); }					/* angle d'arrivée (360 + angle de départ) */
}

/* définition des faces du cube */

.cube_face {
	position: absolute;
	width: 100px;										/* largeur de la face */
	height: 100px; 										/* hauteur de la face */
	border: solid 2px #888;								/* arêtes */
	border-radius: 5px;									/* sommets */
}

/* positionnement des faces par rapport aux axes (valeur en pixels = arête/2) */

.cube_front 	{ transform: translateZ(50px); }					
.cube_top 		{ transform: rotateX(90deg)   translateZ(50px); }
.cube_left 		{ transform: rotateY(-90deg)  translateZ(50px); }
.cube_right 	{ transform: rotateY(90deg)   translateZ(50px); }
.cube_bottom 	{ transform: rotateX(-90deg)  translateZ(50px) }
.cube_rear 		{ transform: rotateY(-180deg) translateZ(50px) }

/* code html */
/*
<div id='cube_box'>
	<div id='cube_a'>
		<div id='cube_b'>
			<div id='cube_c'>
				<div id='cube_d'>
					<img class='cube_face cube_front' src='images/cube_face_1.png' />
					<img class='cube_face cube_top' src='images/cube_face_1.png' />
					<img class='cube_face cube_left' src='images/cube_face_2.png' />
					<img class='cube_face cube_right' src='images/cube_face_2.png' />
					<img class='cube_face cube_bottom' src='images/cube_face_2.png' />
					<img class='cube_face cube_rear' src='images/cube_face_1.png' />
				</div>
			</div>
		</div>
	</div>
</div>
*/

/* infos */
/* 
image 1 : 			images/cube_face_1.png
image 2 : 			images/cube_face_2.png
taille des images : 100px x 100px
couleur du fond : 	var(--color-banner)
couleur de texte : 	#000
police : 			Swiss721 Ext BT
taille de police : 	72px
*/