Code animation complexe

Le code de cette animation

Le CSS

#conteneur {position : relative ; width : 300px ; height : 150px ; 
	margin : 40px auto 40px auto ; 
		perspective :800px; }
@keyframes  animer
{
    from,to  { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    16%      { transform: rotateY(-90deg);                           }
    33%      { transform: rotateY(-90deg) rotateZ(90deg);            }
    50%      { transform: rotateY(-180deg) rotateZ(90deg);           }
    66%      { transform: rotateY(-270deg) rotateX(90deg);           }
    83%      { transform: rotateX(90deg);                            }
 }
.de 
{
    animation: animer linear infinite  16s;     
	transform-style: preserve-3d;
    transform-origin: 60px 60px 0;
 }
 .de div {
    position: absolute;
    width: 120px;
    height: 120px;
    border: 1px solid navy;
    background: green;
    line-height: 120px;
    font-size: 100px;
	text-align :center ;
  }
  .de #face1 {  transform: translateZ(60px);  }
  .de #face2 {   transform: rotateY(90deg) translateZ(60px);  }
  .de #face3 {   transform: rotateY(90deg) rotateX(90deg) translateZ(60px);  }
  .de #face4 {   transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);  }
  .de #face5 {   transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);  }
  .de #face6 {   transform: rotateX(-90deg) translateZ(60px);  }

Toute la subtilité du code est dans le CSS.

L'animation "animer" s'applique à l'élément affecté de la classe "de".

au niveau de la boite affecté de la classe "de"
au niveau de chaque face de "de" (éléments identifiés "face1, face2, face3, etc").

Notez l'emploi de la propriété transform-style: preserve-3d au niveau de la classe de (le dé).
Cette règle CSS indique que que les enfants de l'élément ciblé (donc les faces du dé) doivent être positionnés dans l'espace tridimensionnel.
Autre valeur de cette propriété : flat (enfants de l'élément ciblé en 2D).

Le code HTML

<div id ="conteneur" width ="100%">
	<div class="de">
		<div id="face1">1</div>
		<div id="face2">2</div>
		<div id="face3">3</div>
		<div id="face4">4</div>                                                                                          
		<div id="face5">5</div>
		<div id="face6">6</div>
	</div>
</div>

La boite "de" contenue dans "conteneur".
Les boites identifiées "face1" à "face6" sont enfants de l'élément "de".