/* affichage téléphone */

body {background-color:#015023}
@keyframes spinner { /* définition de l'animation */
	0% {
		transform:rotateX(0deg) rotateY(0deg) ; /* définition du départ */
		}
	100% {
		transform:rotateX(-360deg) rotateY(-360deg) ; /* définition de la fin */
		}
}
#conteneur {/* boite englobante */
	width:150px; 
	height:150px; 
	margin:100px auto; 
	perspective:1000px; /* changement de l'angle de projection 3d */
	
}
#conteneur .rotate {
	animation-duration:5s;  /* durée de l'animation */
	animation-iteration-count:infinite;  /* (nombre/infinite) nombre de fois */
	animation-name:spinner;  /* nom de l'animation définie en keyframe */
	animation-timing-function:linear;  /* fonction d'animation */
	transform-style:preserve-3d; 
	position:relative; 
	backface-visibility:visible; 
	width:150px; height:150px; 
	
}
.rotate img {position:absolute; width:150px; height:150px; border:3px solid black}
.rotate img:nth-child(1) {transform:rotateY(0deg) translateZ(75px)}
.rotate img:nth-child(2) {transform:rotateY(90deg) translateZ(75px)}
.rotate img:nth-child(3) {transform:rotateY(180deg) translateZ(75px)}
.rotate img:nth-child(4) {transform:rotateY(270deg) translateZ(75px)}
.rotate img:nth-child(5) {transform:rotateX(-90deg) translateZ(75px)}
.rotate img:nth-child(6) {transform:rotateX(-270deg) translateZ(75px)}

#conteneur:hover .rotate {animation-play-state:paused}


/* affichage pc */

@media screen and (min-width:500px) {
	#conteneur {/* boite englobante */
		width:300px; 
		height:300px; 
		margin:300px auto; 
		perspective:1000px; /* changement de l'angle de projection 3d */
		
	}
	.rotate img {position:absolute; width:200px; height:200px; border:3px solid black}
	.rotate img:nth-child(1) {transform:rotateY(0deg) translateZ(100px)}
	.rotate img:nth-child(2) {transform:rotateY(90deg) translateZ(100px)}
	.rotate img:nth-child(3) {transform:rotateY(180deg) translateZ(100px)}
	.rotate img:nth-child(4) {transform:rotateY(270deg) translateZ(100px)}
	.rotate img:nth-child(5) {transform:rotateX(-90deg) translateZ(100px)}
	.rotate img:nth-child(6) {transform:rotateX(-270deg) translateZ(100px)}
}