body {background:grey}
@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:100px; 
	height:100px; 
	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; 
	
}
.rotate div {position:absolute; width:150px; height:150px}
.rotate div:nth-child(1) {transform:rotateY(0deg) translateZ(75px)}
.rotate div:nth-child(2) {transform:rotateY(90deg) translateZ(75px)}
.rotate div:nth-child(3) {transform:rotateY(180deg) translateZ(75px)}
.rotate div:nth-child(4) {transform:rotateY(270deg) translateZ(75px)}
.rotate div:nth-child(5) {transform:rotateX(-90deg) translateZ(75px)}
.rotate div:nth-child(6) {transform:rotateX(-270deg) translateZ(75px)}

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

div {width:150px; height:150px; font-size:0}
span {min-width:50px; min-height:50px; display:inline-block; border:2px solid black; box-sizing:border-box; opacity:0.70}
div.vert span {background-color:green}
div.rouge span {background-color:red}
div.jaune span {background-color:yellow}
div.bleu span {background-color:blue}
div.orange span {background-color:orange}
div.blanc span {background-color:white}

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

	div {width:300px; height:300px; font-size:0}
	span {min-width:100px; min-height:100px}
}