Une animation CSS 3D complexe

L'animation

1
2
3
4
5
6

Le code

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 la feuille de style interne !

L'animation appelée "animer" s'applique à "de".

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 fils 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 (fils 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>

Les boites identifiées "face1" à "face6" sont enfants de la boite "de".
La boite "de" contenue dans "conteneur".
Retour menu