Accueil

Tutoriel CSS - sommaire

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

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