Accueil
Mes tutoriels sur la programmation

Tutoriel CSS - sommaire


Vous pouvez me contacter via Facebook (questions, suggestions) : page facebook relative à mon site

Mon site est gratuit pour les visiteurs (et sans publicité) mais sachez qu'il a un coût ...
Signé : l'auteur.

Une animation 3D complexe avec CSS3

L'animation

1
2
3
4
5
6

Le code de la page

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".

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".