Cubes animés en CSS [CSS21]

Cet exercice consiste à créer un cube à l’aide des transformations 3D puis de l’animer et enfin de le personnaliser.

Consignes de l’exercice

Préparation de l’exercice

Créez un dossier racine (dossier de travail) à l’emplacement souhaité sur votre ordinateur.

Créez une nouvelle page HTML dans votre dossier racine.

Créez une nouvelle feuille de style CSS dans le dossier racine.

Associez la feuille de style à la page HTML.

Le code ci-dessous doit être placé dans l’en-tête <head> de la page HTML. Il est nécessaire de personnaliser la valeur de l’attribut href afin qu’elle corresponde à l’emplacement et au nom du fichier CSS à lier.

<link  rel="stylesheet" type="text/css" href="style.css">

<link  rel="stylesheet" type="text/css" href="style.css">

Création du cube

Vous pouvez essayer de créer le cube par vous-même sans suivre les consignes ou alors vous faire guider étape par étape. L’objectif étant d’avoir le résultat suivant :

HTML : Créez un conteneur <div> avec 6 <div> enfants .

<div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

<div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div>    <div></div></div>

HTML : Ajoutez des classes permettant d’identifier le cube et les 6 faces, puis les différentes faces entre elles.

<div class="cube">
    <div class="face face-avant"></div>
    <div class="face face-bas"></div>
    <div class="face face-droite"></div>
    <div class="face face-gauche"></div>
    <div class="face face-haut"></div>
    <div class="face face-arriere"></div>
</div>

<div class="cube">    <div class="face face-avant"></div>    <div class="face face-bas"></div>    <div class="face face-droite"></div>    <div class="face face-gauche"></div>    <div class="face face-haut"></div>    <div class="face face-arriere"></div></div>

CSS : Dimensionnez les faces afin de les rendre carré et ajoutez leur une bordure.

.face {
    width: 100px;
    height: 100px;
    border: 2px solid #ff23e2;
    box-sizing: border-box;
}

.face {    width: 100px;    height: 100px;    border: 2px solid #ff23e2;    box-sizing: border-box;}

Box-sizing permet d’adapter le modèle de boîte pour intégrer les bordures dans les dimensions des faces.

CSS : Pour ne pas travailler à « plat » et afin de pouvoir mieux visualiser les étapes de construction du cube, ajoutez au cube une transformation de 20deg sur l’axe X et sur l’axe Y.

Pensez à ajouter au cube la propriété transform-style: preserve-3d ; sans laquelle le cube sera seul dans son espace 3D avec des faces qui resteront en 2D.

.cube {
    transform: rotateY(-10deg) rotateX(-10deg);
    transform-style: preserve-3d;
}

.cube {    transform: rotateY(-10deg) rotateX(-10deg);    transform-style: preserve-3d;}

CSS : Positionnez chaque face du cube grâce à sa classe spécifique en utilisant des transformations 3D (translate et rotate).

Animation de démonstration du positionnement des faces

.face-avant {
    transform: translateZ(50px);
}
.face-arriere {
    transform: rotateY(180deg) translateZ(50px);
}
.face-droite {
    transform: rotateY(90deg) translateZ(50px);
}
.face-gauche {
    transform: rotateY(-90deg) translateZ(50px);
}
.face-haut {
    transform: rotateX(90deg) translateZ(50px);
}
.face-bas {
    transform: rotateX(-90deg) translateZ(50px);
}

.face-avant {    transform: translateZ(50px);}.face-arriere {    transform: rotateY(180deg) translateZ(50px);}.face-droite {    transform: rotateY(90deg) translateZ(50px);}.face-gauche {    transform: rotateY(-90deg) translateZ(50px);}.face-haut {    transform: rotateX(90deg) translateZ(50px);}.face-bas {    transform: rotateX(-90deg) translateZ(50px);}

.cube {
    transform-style: preserve-3d;
    transform: rotateY(-20deg) rotateX(-20deg);
    width: 100px;
    height: 100px;
}
.face {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 2px solid #ff23e2;
    box-sizing: border-box;
}
.face-avant {
    transform: translateZ(50px);
}
.face-arriere {
    transform: rotateY(180deg) translateZ(50px);
}
.face-droite {
    transform: rotateY(90deg) translateZ(50px);
}
.face-gauche {
    transform: rotateY(-90deg) translateZ(50px);
}
.face-haut {
    transform: rotateX(90deg) translateZ(50px);
}
.face-bas {
    transform: rotateX(-90deg) translateZ(50px);
}

.cube {    transform-style: preserve-3d;    transform: rotateY(-20deg) rotateX(-20deg);    width: 100px;    height: 100px;}.face {    position: absolute;    width: 100px;    height: 100px;    border: 2px solid #ff23e2;    box-sizing: border-box;}.face-avant {    transform: translateZ(50px);}.face-arriere {    transform: rotateY(180deg) translateZ(50px);}.face-droite {    transform: rotateY(90deg) translateZ(50px);}.face-gauche {    transform: rotateY(-90deg) translateZ(50px);}.face-haut {    transform: rotateX(90deg) translateZ(50px);}.face-bas {    transform: rotateX(-90deg) translateZ(50px);}

$size: 100px;

.showroom {
  margin-top:20px;
  padding: 50px;
  display:flex;
  justify-content: space-around;
}
.cube {  
  transform-style: preserve-3d;
  transform: rotateY(-20deg) rotateX(-20deg);
  animation: cube 4s linear infinite  ;  
  width: $size;
  height: $size;
}
.face {
  box-sizing: border-box;
  position: absolute;
  width: $size;
  height: $size;
  border: 2px solid #ff23e2;
}
.face-avant {
  transform: translateZ($size/2);
}
.face-arriere {
  transform: rotateY(180deg) translateZ($size/2);
}
.face-droite {
  transform: rotateY(90deg) translateZ($size/2);
}
.face-gauche {
  transform: rotateY(-90deg) translateZ($size/2);
}
.face-haut {
  transform: rotateX(90deg) translateZ($size/2); 
}
.face-bas {
   transform: rotateX(-90deg) translateZ($size/2);
}

$size: 100px;.showroom {  margin-top:20px;  padding: 50px;  display:flex;  justify-content: space-around;}.cube {    transform-style: preserve-3d;  transform: rotateY(-20deg) rotateX(-20deg);  animation: cube 4s linear infinite  ;    width: $size;  height: $size;}.face {  box-sizing: border-box;  position: absolute;  width: $size;  height: $size;  border: 2px solid #ff23e2;}.face-avant {  transform: translateZ($size/2);}.face-arriere {  transform: rotateY(180deg) translateZ($size/2);}.face-droite {  transform: rotateY(90deg) translateZ($size/2);}.face-gauche {  transform: rotateY(-90deg) translateZ($size/2);}.face-haut {  transform: rotateX(90deg) translateZ($size/2); }.face-bas {   transform: rotateX(-90deg) translateZ($size/2);}

Animation du cube

CSS : Ajoutez un effet d’animation au cube pour le faire tourner.

.cube {
  transform-style: preserve-3d;
  transform: rotateY(-20deg) rotateX(-20deg);
  width: 100px;
  height: 100px;
  animation: cube 4s linear infinite  ;  
}

.cube {  transform-style: preserve-3d;  transform: rotateY(-20deg) rotateX(-20deg);  width: 100px;  height: 100px;  animation: cube 4s linear infinite  ;  }

@keyframes cube {
  from {
    transform: rotateY(-20deg) rotateX(-20deg);
  }
  to { 
    transform: rotateY(-380deg) rotateX(-20deg) ;  
  } 
}

@keyframes cube {  from {    transform: rotateY(-20deg) rotateX(-20deg);  }  to {     transform: rotateY(-380deg) rotateX(-20deg) ;    } }

Personnalisation du cube

HTML & CSS : Créez une copie de votre cube initial et adaptez-le pour obtenir le résultat ci-dessous

.container {
  padding: 60px;
  display: flex;
  justify-content: center;
}

.cube-colore {
  transform-style: preserve-3d;
  transform: rotateY(-20deg) rotateX(-20deg);
  animation: cube 4s linear infinite;
  width: 100px;
  height: 100px;
}
.cube-colore .face {
  position: absolute;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
}
.cube-colore .face-avant {
  transform: translateZ(50px);
  background-color: #FF6D00;
}
.cube-colore .face-arriere {
  transform: rotateY(180deg) translateZ(50px);
  background-color: #FF6D00;
}
.cube-colore .face-droite {
  transform: rotateY(90deg) translateZ(50px);
  background-color: #ff994d;
}
.cube-colore .face-gauche {
  transform: rotateY(-90deg) translateZ(50px);
  background-color: #ff994d;
}
.cube-colore .face-haut {
  transform: rotateX(90deg) translateZ(50px);
  background-color: #b34c00;
}
.cube-colore .face-bas {
  transform: rotateX(-90deg) translateZ(50px);
  background-color: #b34c00;
}
@keyframes cube {
  from {
    transform: rotateY(-20deg) rotateX(-20deg);
  }
  to {
    transform: rotateY(-380deg) rotateX(-20deg);
  }
}

.container {  padding: 60px;  display: flex;  justify-content: center;}.cube-colore {  transform-style: preserve-3d;  transform: rotateY(-20deg) rotateX(-20deg);  animation: cube 4s linear infinite;  width: 100px;  height: 100px;}.cube-colore .face {  position: absolute;  width: 100px;  height: 100px;  box-sizing: border-box;}.cube-colore .face-avant {  transform: translateZ(50px);  background-color: #FF6D00;}.cube-colore .face-arriere {  transform: rotateY(180deg) translateZ(50px);  background-color: #FF6D00;}.cube-colore .face-droite {  transform: rotateY(90deg) translateZ(50px);  background-color: #ff994d;}.cube-colore .face-gauche {  transform: rotateY(-90deg) translateZ(50px);  background-color: #ff994d;}.cube-colore .face-haut {  transform: rotateX(90deg) translateZ(50px);  background-color: #b34c00;}.cube-colore .face-bas {  transform: rotateX(-90deg) translateZ(50px);  background-color: #b34c00;}@keyframes cube {  from {    transform: rotateY(-20deg) rotateX(-20deg);  }  to {    transform: rotateY(-380deg) rotateX(-20deg);  }}

.container {
  padding: 60px;
  display: flex;
    justify-content: center;
}

$size: 100px;
$color: #FF6D00;

.cube-colore {
    transform-style: preserve-3d;
    transform: rotateY(-20deg) rotateX(-20deg);
    animation: cube 4s linear infinite;
  width: $size;
  height: $size;
    
    .face {
        position: absolute;
        width: $size;
        height: $size;
        box-sizing: border-box;
    }

    // Positionnement des faces
    .face-avant {
        transform: translateZ($size/2);
        background-color: $color;
    }
    .face-arriere {
        transform: rotateY(180deg) translateZ($size/2);
        background-color: $color;
    }
    .face-droite {
        transform: rotateY(90deg) translateZ($size/2);
        background-color: lighten($color,15%);
    }
    .face-gauche {
        transform: rotateY(-90deg) translateZ($size/2);
        background-color: lighten($color,15%);
    }
    .face-haut {
        transform: rotateX(90deg) translateZ($size/2);
        background-color: darken($color,15%);
    }
    .face-bas {
        transform: rotateX(-90deg) translateZ($size/2);
        background-color: darken($color,15%);
    }

    // Animation
    @keyframes cube {
        from {
            transform: rotateY(-20deg) rotateX(-20deg);
        }
        to {
            transform: rotateY(-380deg) rotateX(-20deg);
        }
    }
}

.container {  padding: 60px;  display: flex;    justify-content: center;}$size: 100px;$color: #FF6D00;.cube-colore {    transform-style: preserve-3d;    transform: rotateY(-20deg) rotateX(-20deg);    animation: cube 4s linear infinite;  width: $size;  height: $size;        .face {        position: absolute;        width: $size;        height: $size;        box-sizing: border-box;    }    // Positionnement des faces    .face-avant {        transform: translateZ($size/2);        background-color: $color;    }    .face-arriere {        transform: rotateY(180deg) translateZ($size/2);        background-color: $color;    }    .face-droite {        transform: rotateY(90deg) translateZ($size/2);        background-color: lighten($color,15%);    }    .face-gauche {        transform: rotateY(-90deg) translateZ($size/2);        background-color: lighten($color,15%);    }    .face-haut {        transform: rotateX(90deg) translateZ($size/2);        background-color: darken($color,15%);    }    .face-bas {        transform: rotateX(-90deg) translateZ($size/2);        background-color: darken($color,15%);    }    // Animation    @keyframes cube {        from {            transform: rotateY(-20deg) rotateX(-20deg);        }        to {            transform: rotateY(-380deg) rotateX(-20deg);        }    }}

HTML & CSS : Créez une copie de votre cube initial et adaptez-le pour obtenir le résultat ci-dessous

Après avoir appliquer la couleur aux différentes face et avoir ajouté l’image, la solution la plus simple pour aplatir notre cube est d’utiliser une transformation 3D. Nous aurions également pu redimensionner et repositionner toutes les faces.

.container {
  padding: 60px;
  display: flex;
  justify-content: center;
}

.cube-plat {
  transform-style: preserve-3d;
  transform: rotateY(-20deg) rotateX(-20deg);
  animation: cube-plat 4s linear infinite;
  width: 100px;
  height: 100px;
}
.cube-plat .face {
  position: absolute;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  background-color: #932253;
}
.cube-plat .face-avant {
  transform: translateZ(50px);
  background: url("demo-flamingo.png") no-repeat #d03177;
  background-size: 80px 80px;
  background-position: 10px 10px;
}
.cube-plat .face-arriere {
  transform: rotateY(180deg) translateZ(50px);
}
.cube-plat .face-droite {
  transform: rotateY(90deg) translateZ(50px);
}
.cube-plat .face-gauche {
  transform: rotateY(-90deg) translateZ(50px);
}
.cube-plat .face-haut {
  transform: rotateX(90deg) translateZ(50px);
}
.cube-plat .face-bas {
  transform: rotateX(-90deg) translateZ(50px);
}

@keyframes cube-plat {
  from {
    transform: rotateY(-20deg) rotateX(-20deg) scale3d(1, 1, 0.1);
  }
  to {
    transform: rotateY(-380deg) rotateX(-20deg) scale3d(1, 1, 0.1);
  }
}

.container {  padding: 60px;  display: flex;  justify-content: center;}.cube-plat {  transform-style: preserve-3d;  transform: rotateY(-20deg) rotateX(-20deg);  animation: cube-plat 4s linear infinite;  width: 100px;  height: 100px;}.cube-plat .face {  position: absolute;  width: 100px;  height: 100px;  box-sizing: border-box;  background-color: #932253;}.cube-plat .face-avant {  transform: translateZ(50px);  background: url("demo-flamingo.png") no-repeat #d03177;  background-size: 80px 80px;  background-position: 10px 10px;}.cube-plat .face-arriere {  transform: rotateY(180deg) translateZ(50px);}.cube-plat .face-droite {  transform: rotateY(90deg) translateZ(50px);}.cube-plat .face-gauche {  transform: rotateY(-90deg) translateZ(50px);}.cube-plat .face-haut {  transform: rotateX(90deg) translateZ(50px);}.cube-plat .face-bas {  transform: rotateX(-90deg) translateZ(50px);}@keyframes cube-plat {  from {    transform: rotateY(-20deg) rotateX(-20deg) scale3d(1, 1, 0.1);  }  to {    transform: rotateY(-380deg) rotateX(-20deg) scale3d(1, 1, 0.1);  }}

.container {
  padding: 60px;
  display: flex;
    justify-content: center;
}

$size: 100px;
$color: #d03177;

.cube-plat {  
  transform-style: preserve-3d;
  transform: rotateY(-20deg) rotateX(-20deg);
  animation: cube-plat 4s linear infinite  ;  
  width: $size;
  height: $size;
    
    .face {
        position: absolute;
        width: $size;
        height: $size;
        box-sizing: border-box;
        background-color: darken($color,15%);
    }
    
    .face-avant {
        transform: translateZ($size/2);
        background: url('demo-flamingo.png') no-repeat $color ;
        background-size: ($size * 0.80) ($size * 0.80);
        background-position: ($size * 0.10) ($size * 0.10);
    }
    .face-arriere {
        transform: rotateY(180deg) translateZ($size/2);
    }
    .face-droite {
        transform: rotateY(90deg) translateZ($size/2);
    }
    .face-gauche {
        transform: rotateY(-90deg) translateZ($size/2);
    }
    .face-haut {
        transform: rotateX(90deg) translateZ($size/2); 
    }
    .face-bas {
         transform: rotateX(-90deg) translateZ($size/2);
    }
}

@keyframes cube-plat {
  from {
    transform: rotateY(-20deg) rotateX(-20deg) scale3d(1,1,0.1);
  }
  to { 
    transform: rotateY(-380deg) rotateX(-20deg) scale3d(1,1,0.1); 
  } 
}

.container {  padding: 60px;  display: flex;    justify-content: center;}$size: 100px;$color: #d03177;.cube-plat {    transform-style: preserve-3d;  transform: rotateY(-20deg) rotateX(-20deg);  animation: cube-plat 4s linear infinite  ;    width: $size;  height: $size;        .face {        position: absolute;        width: $size;        height: $size;        box-sizing: border-box;        background-color: darken($color,15%);    }        .face-avant {        transform: translateZ($size/2);        background: url('demo-flamingo.png') no-repeat $color ;        background-size: ($size * 0.80) ($size * 0.80);        background-position: ($size * 0.10) ($size * 0.10);    }    .face-arriere {        transform: rotateY(180deg) translateZ($size/2);    }    .face-droite {        transform: rotateY(90deg) translateZ($size/2);    }    .face-gauche {        transform: rotateY(-90deg) translateZ($size/2);    }    .face-haut {        transform: rotateX(90deg) translateZ($size/2);     }    .face-bas {         transform: rotateX(-90deg) translateZ($size/2);    }}@keyframes cube-plat {  from {    transform: rotateY(-20deg) rotateX(-20deg) scale3d(1,1,0.1);  }  to {     transform: rotateY(-380deg) rotateX(-20deg) scale3d(1,1,0.1);   } }

Personnalisation avancées du cube

Pour les deux cubes suivant, il est nécessaire de modifier de manière plus importante le code HTML.

HTML & CSS : Créez une copie de votre cube initial et adaptez-le pour obtenir le résultat suivant. Les faces intérieures et extérieures ont des couleurs différentes. Il s’agit donc d’éléments <div> différents.

<div class="container">
    <div class="cube-interrogation">
        <div class="face face-avant">?</div>
        <div class="face face-bas"></div>
        <div class="face face-bas-int"></div>
        <div class="face face-droite"></div>
        <div class="face face-droite-int"></div>
        <div class="face face-gauche"></div>
        <div class="face face-gauche-int"></div>
        <div class="face face-haut"></div>
        <div class="face face-haut-int"></div>
        <div class="face face-arriere">!</div>
    </div>
</div>

<div class="container">    <div class="cube-interrogation">        <div class="face face-avant">?</div>        <div class="face face-bas"></div>        <div class="face face-bas-int"></div>        <div class="face face-droite"></div>        <div class="face face-droite-int"></div>        <div class="face face-gauche"></div>        <div class="face face-gauche-int"></div>        <div class="face face-haut"></div>        <div class="face face-haut-int"></div>        <div class="face face-arriere">!</div>    </div></div>

@import url("https://fonts.googleapis.com/css?family=Chango");
.container {
  padding: 60px;
  display: flex;
  justify-content: center;
}

.cube-interrogation {
  transform-style: preserve-3d;
  transform: rotateY(-20deg) rotateX(-20deg);
  animation: cube 4s linear infinite;
  width: 100px;
  height: 100px;
}
.cube-interrogation .face {
  position: absolute;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  backface-visibility: hidden;
}
.cube-interrogation .face-avant,
.cube-interrogation .face-arriere {
  font-family: "Chango", cursive;
  font-size: 66.6666666667px;
  text-align: center;
  line-height: 100px;
}
.cube-interrogation .face-avant {
  transform: translateZ(0);
}
.cube-interrogation .face-arriere {
  transform: translateZ(0) rotateY(180deg);
}
.cube-interrogation .face-droite {
  transform: rotateY(90deg) translateZ(50px);
  background-color: #99ff4d;
}
.cube-interrogation .face-droite-int {
  background-color: #4d99ff;
  transform: rotateY(-90deg) translateZ(-50px);
}
.cube-interrogation .face-gauche {
  transform: rotateY(-90deg) translateZ(50px);
  background-color: #99ff4d;
  backface-visibility: hidden;
}
.cube-interrogation .face-gauche-int {
  background-color: #4d99ff;
  transform: rotateY(90deg) translateZ(-50px);
}
.cube-interrogation .face-haut {
  transform: rotateX(90deg) translateZ(50px);
  background-color: #4cb300;
}
.cube-interrogation .face-haut-int {
  background-color: #004cb3;
  transform: rotateX(-90deg) translateZ(-50px);
}
.cube-interrogation .face-bas {
  transform: rotateX(-90deg) translateZ(50px);
  background-color: #4cb300;
}
.cube-interrogation .face-bas-int {
  background-color: #004cb3;
  transform: rotateX(90deg) translateZ(-50px);
}
@keyframes cube {
  from {
    transform: rotateY(-20deg) rotateX(-20deg);
  }
  to {
    transform: rotateY(-380deg) rotateX(-20deg);
  }
}

@import url("https://fonts.googleapis.com/css?family=Chango");.container {  padding: 60px;  display: flex;  justify-content: center;}.cube-interrogation {  transform-style: preserve-3d;  transform: rotateY(-20deg) rotateX(-20deg);  animation: cube 4s linear infinite;  width: 100px;  height: 100px;}.cube-interrogation .face {  position: absolute;  width: 100px;  height: 100px;  box-sizing: border-box;  backface-visibility: hidden;}.cube-interrogation .face-avant,.cube-interrogation .face-arriere {  font-family: "Chango", cursive;  font-size: 66.6666666667px;  text-align: center;  line-height: 100px;}.cube-interrogation .face-avant {  transform: translateZ(0);}.cube-interrogation .face-arriere {  transform: translateZ(0) rotateY(180deg);}.cube-interrogation .face-droite {  transform: rotateY(90deg) translateZ(50px);  background-color: #99ff4d;}.cube-interrogation .face-droite-int {  background-color: #4d99ff;  transform: rotateY(-90deg) translateZ(-50px);}.cube-interrogation .face-gauche {  transform: rotateY(-90deg) translateZ(50px);  background-color: #99ff4d;  backface-visibility: hidden;}.cube-interrogation .face-gauche-int {  background-color: #4d99ff;  transform: rotateY(90deg) translateZ(-50px);}.cube-interrogation .face-haut {  transform: rotateX(90deg) translateZ(50px);  background-color: #4cb300;}.cube-interrogation .face-haut-int {  background-color: #004cb3;  transform: rotateX(-90deg) translateZ(-50px);}.cube-interrogation .face-bas {  transform: rotateX(-90deg) translateZ(50px);  background-color: #4cb300;}.cube-interrogation .face-bas-int {  background-color: #004cb3;  transform: rotateX(90deg) translateZ(-50px);}@keyframes cube {  from {    transform: rotateY(-20deg) rotateX(-20deg);  }  to {    transform: rotateY(-380deg) rotateX(-20deg);  }}

.container {
  padding: 60px;
  display: flex;
    justify-content: center;
}

$size: 100px;
$color: #6Dff00;
$color2: #006Dff;

@import url('https://fonts.googleapis.com/css?family=Chango');

.cube-interrogation {  
  transform-style: preserve-3d;
  transform: rotateY(-20deg) rotateX(-20deg);
  animation: cube 4s linear infinite  ;  
  width: $size;
  height: $size;

  .face {
    position: absolute;
    width: $size;
    height: $size;
    box-sizing: border-box;
    backface-visibility: hidden;
  }
  .face-avant,
  .face-arriere {
      font-family: 'Chango', cursive;
      font-size: $size / 1.5;
      text-align: center;
      line-height: $size;
  }
  .face-avant {
    transform: translateZ(0);
  }
  .face-arriere {
    transform: translateZ(0) rotateY(180deg);
  }
  .face-droite {
    transform: rotateY(90deg) translateZ($size/2);
    background-color: lighten($color,15%);
  }
  .face-droite-int {
    background-color: lighten($color2,15%);
    transform: rotateY(-90deg) translateZ(-$size/2);
  }
  .face-gauche {
    transform: rotateY(-90deg) translateZ($size/2);
    background-color: lighten($color,15%);
    backface-visibility: hidden;
  }
  .face-gauche-int {
    background-color: lighten($color2,15%);
    transform: rotateY(90deg) translateZ(-$size/2);
  }
  .face-haut {
    transform: rotateX(90deg) translateZ($size/2); 
    background-color: darken($color,15%);
  }
  .face-haut-int {
    background-color: darken($color2,15%);
    transform: rotateX(-90deg) translateZ(-$size/2); 
  }
  .face-bas {
    transform: rotateX(-90deg) translateZ($size/2);
    background-color: darken($color,15%);
  }
  .face-bas-int {
    background-color: darken($color2,15%);
    transform: rotateX(90deg) translateZ(-$size/2);
  }

  @keyframes cube {
    from {
      transform: rotateY(-20deg) rotateX(-20deg);
    }
    to { 
      transform: rotateY(-380deg) rotateX(-20deg) ;  
    } 
  }
}

.container {  padding: 60px;  display: flex;    justify-content: center;}$size: 100px;$color: #6Dff00;$color2: #006Dff;@import url('https://fonts.googleapis.com/css?family=Chango');.cube-interrogation {    transform-style: preserve-3d;  transform: rotateY(-20deg) rotateX(-20deg);  animation: cube 4s linear infinite  ;    width: $size;  height: $size;  .face {    position: absolute;    width: $size;    height: $size;    box-sizing: border-box;    backface-visibility: hidden;  }  .face-avant,  .face-arriere {      font-family: 'Chango', cursive;      font-size: $size / 1.5;      text-align: center;      line-height: $size;  }  .face-avant {    transform: translateZ(0);  }  .face-arriere {    transform: translateZ(0) rotateY(180deg);  }  .face-droite {    transform: rotateY(90deg) translateZ($size/2);    background-color: lighten($color,15%);  }  .face-droite-int {    background-color: lighten($color2,15%);    transform: rotateY(-90deg) translateZ(-$size/2);  }  .face-gauche {    transform: rotateY(-90deg) translateZ($size/2);    background-color: lighten($color,15%);    backface-visibility: hidden;  }  .face-gauche-int {    background-color: lighten($color2,15%);    transform: rotateY(90deg) translateZ(-$size/2);  }  .face-haut {    transform: rotateX(90deg) translateZ($size/2);     background-color: darken($color,15%);  }  .face-haut-int {    background-color: darken($color2,15%);    transform: rotateX(-90deg) translateZ(-$size/2);   }  .face-bas {    transform: rotateX(-90deg) translateZ($size/2);    background-color: darken($color,15%);  }  .face-bas-int {    background-color: darken($color2,15%);    transform: rotateX(90deg) translateZ(-$size/2);  }  @keyframes cube {    from {      transform: rotateY(-20deg) rotateX(-20deg);    }    to {       transform: rotateY(-380deg) rotateX(-20deg) ;      }   }}

HTML & CSS : Créez une copie de votre cube initial et adaptez-le pour obtenir le résultat suivant.

Pour cette solution, les points sont positionnés via un système de grille de trois colonnes et trois rangées.

Code HTML :

<div class="container">
    <div class="cube-de">
        <div class="face face-avant">
        <span class="pos-5"></span>
    </div>
    <div class="face face-bas">
      <span class="pos-1"></span>
      <span class="pos-3"></span>
      <span class="pos-7"></span>
      <span class="pos-9"></span>
    </div>
    <div class="face face-droite">
        <span class="pos-1"></span>
        <span class="pos-3"></span>
        <span class="pos-5"></span>
        <span class="pos-7"></span>
        <span class="pos-9"></span>
    </div>
    <div class="face face-gauche">
        <span class="pos-1"></span>
        <span class="pos-9"></span>
    </div>
    <div class="face face-haut">
        <span class="pos-1"></span>
        <span class="pos-5"></span>
        <span class="pos-9"></span>
    </div>
    <div class="face face-arriere">
        <span class="pos-1"></span>
        <span class="pos-2"></span>
        <span class="pos-3"></span>
        <span class="pos-7"></span>
        <span class="pos-8"></span>
        <span class="pos-9"></span>
    </div>
    </div>
</div>

<div class="container">    <div class="cube-de">        <div class="face face-avant">        <span class="pos-5"></span>    </div>    <div class="face face-bas">      <span class="pos-1"></span>      <span class="pos-3"></span>      <span class="pos-7"></span>      <span class="pos-9"></span>    </div>    <div class="face face-droite">        <span class="pos-1"></span>        <span class="pos-3"></span>        <span class="pos-5"></span>        <span class="pos-7"></span>        <span class="pos-9"></span>    </div>    <div class="face face-gauche">        <span class="pos-1"></span>        <span class="pos-9"></span>    </div>    <div class="face face-haut">        <span class="pos-1"></span>        <span class="pos-5"></span>        <span class="pos-9"></span>    </div>    <div class="face face-arriere">        <span class="pos-1"></span>        <span class="pos-2"></span>        <span class="pos-3"></span>        <span class="pos-7"></span>        <span class="pos-8"></span>        <span class="pos-9"></span>    </div>    </div></div>

Code CSS :

.container {
  padding: 60px;
  display: flex;
  justify-content: center;
}

.cube-de {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-20deg) rotateX(-20deg);
  animation: cubede 5s linear infinite;
  width: 100px;
  height: 100px;
}
.cube-de .face {
  position: absolute;
  width: 100px;
  height: 100px;
  opacity: 0.95;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: center;
  align-items: center;
  box-sizing: border-box;
  padding: 15%;
}
.cube-de .face span {
  display: block;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background-color: #000;
  margin: auto;
}
.cube-de .face span.pos-1 {
  grid-column-start: 1;
  grid-row-start: 1;
}
.cube-de .face span.pos-2 {
  grid-column-start: 2;
  grid-row-start: 1;
}
.cube-de .face span.pos-3 {
  grid-column-start: 3;
  grid-row-start: 1;
}
.cube-de .face span.pos-4 {
  grid-column-start: 1;
  grid-row-start: 2;
}
.cube-de .face span.pos-5 {
  grid-column-start: 2;
  grid-row-start: 2;
}
.cube-de .face span.pos-6 {
  grid-column-start: 3;
  grid-row-start: 2;
}
.cube-de .face span.pos-7 {
  grid-column-start: 1;
  grid-row-start: 3;
}
.cube-de .face span.pos-8 {
  grid-column-start: 2;
  grid-row-start: 3;
}
.cube-de .face span.pos-9 {
  grid-column-start: 3;
  grid-row-start: 3;
}
.cube-de .face-avant {
  background-color: #bbb;
  transform: translateZ(50px);
}
.cube-de .face-arriere {
  background-color: #bbb;
  transform: rotateY(180deg) translateZ(50px);
}
.cube-de .face-droite {
  background-color: #e1e1e1;
  transform: rotateY(90deg) translateZ(50px);
}
.cube-de .face-gauche {
  background-color: #e1e1e1;
  transform: rotateY(-90deg) translateZ(50px);
}
.cube-de .face-haut {
  background-color: #959595;
  transform: rotateX(90deg) translateZ(50px);
}
.cube-de .face-bas {
  background-color: #959595;
  transform: rotateX(-90deg) translateZ(50px);
}

@keyframes cubede {
  from {
    transform: rotateY(-20deg) rotateZ(0) rotateX(-20deg);
  }
  to {
    transform: rotateY(-380deg) rotateZ(360deg) rotateX(-20deg);
  }
}

.container {  padding: 60px;  display: flex;  justify-content: center;}.cube-de {  position: relative;  transform-style: preserve-3d;  transform: rotateY(-20deg) rotateX(-20deg);  animation: cubede 5s linear infinite;  width: 100px;  height: 100px;}.cube-de .face {  position: absolute;  width: 100px;  height: 100px;  opacity: 0.95;  display: grid;  grid-template-rows: 1fr 1fr 1fr;  grid-template-columns: 1fr 1fr 1fr;  justify-items: center;  align-items: center;  box-sizing: border-box;  padding: 15%;}.cube-de .face span {  display: block;  width: 70%;  height: 70%;  border-radius: 50%;  background-color: #000;  margin: auto;}.cube-de .face span.pos-1 {  grid-column-start: 1;  grid-row-start: 1;}.cube-de .face span.pos-2 {  grid-column-start: 2;  grid-row-start: 1;}.cube-de .face span.pos-3 {  grid-column-start: 3;  grid-row-start: 1;}.cube-de .face span.pos-4 {  grid-column-start: 1;  grid-row-start: 2;}.cube-de .face span.pos-5 {  grid-column-start: 2;  grid-row-start: 2;}.cube-de .face span.pos-6 {  grid-column-start: 3;  grid-row-start: 2;}.cube-de .face span.pos-7 {  grid-column-start: 1;  grid-row-start: 3;}.cube-de .face span.pos-8 {  grid-column-start: 2;  grid-row-start: 3;}.cube-de .face span.pos-9 {  grid-column-start: 3;  grid-row-start: 3;}.cube-de .face-avant {  background-color: #bbb;  transform: translateZ(50px);}.cube-de .face-arriere {  background-color: #bbb;  transform: rotateY(180deg) translateZ(50px);}.cube-de .face-droite {  background-color: #e1e1e1;  transform: rotateY(90deg) translateZ(50px);}.cube-de .face-gauche {  background-color: #e1e1e1;  transform: rotateY(-90deg) translateZ(50px);}.cube-de .face-haut {  background-color: #959595;  transform: rotateX(90deg) translateZ(50px);}.cube-de .face-bas {  background-color: #959595;  transform: rotateX(-90deg) translateZ(50px);}@keyframes cubede {  from {    transform: rotateY(-20deg) rotateZ(0) rotateX(-20deg);  }  to {    transform: rotateY(-380deg) rotateZ(360deg) rotateX(-20deg);  }}

Code SCSS :

.container {
  padding: 60px;
  display: flex;
    justify-content: center;
}

$timing: 5s;
$size: 100px;
$color: #bbb;

.cube-de {  
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-20deg) rotateX(-20deg);
  animation: cubede $timing linear infinite ;  
  width: $size;
  height: $size;
    
    .face {
        position: absolute;
        width: 100px;
        height: 100px;
        opacity: 0.95;
        display: grid;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;
        justify-items: center;
        align-items: center;
        box-sizing: border-box;
        padding: 15%;
    }
    .face span {
        display: block;
        width: 70%;
        height: 70%;
        border-radius: 50%;
        background-color: #000;
        margin: auto;
    }
    .face span.pos-1 {
        grid-column-start: 1;
        grid-row-start: 1;
    }
    .face span.pos-2 {
        grid-column-start: 2;
        grid-row-start: 1;
    }
    .face span.pos-3 {
        grid-column-start: 3;
        grid-row-start: 1;
    }
    .face span.pos-4 {
        grid-column-start: 1;
        grid-row-start: 2;
    }
    .face span.pos-5 {
        grid-column-start: 2;
        grid-row-start: 2;
    }
    .face span.pos-6 {
        grid-column-start: 3;
        grid-row-start: 2;
    }
    .face span.pos-7 {
        grid-column-start: 1;
        grid-row-start: 3;
    }
    .face span.pos-8 {
        grid-column-start: 2;
        grid-row-start: 3;
    }
    .face span.pos-9 {
        grid-column-start: 3;
        grid-row-start: 3;
    }
    
    // Positionnement des faces
    .face-avant {
        background-color: $color;
        transform: translateZ($size/2);
    }
    .face-arriere {
        background-color: $color;
        transform: rotateY(180deg) translateZ($size/2);
    }
    .face-droite {
        background-color: lighten($color,15%);
        transform: rotateY(90deg) translateZ($size/2);
    }
    .face-gauche {
        background-color: lighten($color,15%);
        transform: rotateY(-90deg) translateZ($size/2);
    }
    .face-haut {
        background-color: darken($color,15%);
        transform: rotateX(90deg) translateZ($size/2); 
    }
    .face-bas {
        background-color: darken($color,15%);
        transform: rotateX(-90deg) translateZ($size/2);
    }
}

@keyframes cubede {
  from {
    transform: rotateY(-20deg) rotateZ(0) rotateX(-20deg);
  }
  to { 
    transform: rotateY(-380deg) rotateZ(360deg) rotateX(-20deg) ;  
  } 
}

.container {  padding: 60px;  display: flex;    justify-content: center;}$timing: 5s;$size: 100px;$color: #bbb;.cube-de {    position: relative;  transform-style: preserve-3d;  transform: rotateY(-20deg) rotateX(-20deg);  animation: cubede $timing linear infinite ;    width: $size;  height: $size;        .face {        position: absolute;        width: 100px;        height: 100px;        opacity: 0.95;        display: grid;        grid-template-rows: 1fr 1fr 1fr;        grid-template-columns: 1fr 1fr 1fr;        justify-items: center;        align-items: center;        box-sizing: border-box;        padding: 15%;    }    .face span {        display: block;        width: 70%;        height: 70%;        border-radius: 50%;        background-color: #000;        margin: auto;    }    .face span.pos-1 {        grid-column-start: 1;        grid-row-start: 1;    }    .face span.pos-2 {        grid-column-start: 2;        grid-row-start: 1;    }    .face span.pos-3 {        grid-column-start: 3;        grid-row-start: 1;    }    .face span.pos-4 {        grid-column-start: 1;        grid-row-start: 2;    }    .face span.pos-5 {        grid-column-start: 2;        grid-row-start: 2;    }    .face span.pos-6 {        grid-column-start: 3;        grid-row-start: 2;    }    .face span.pos-7 {        grid-column-start: 1;        grid-row-start: 3;    }    .face span.pos-8 {        grid-column-start: 2;        grid-row-start: 3;    }    .face span.pos-9 {        grid-column-start: 3;        grid-row-start: 3;    }        // Positionnement des faces    .face-avant {        background-color: $color;        transform: translateZ($size/2);    }    .face-arriere {        background-color: $color;        transform: rotateY(180deg) translateZ($size/2);    }    .face-droite {        background-color: lighten($color,15%);        transform: rotateY(90deg) translateZ($size/2);    }    .face-gauche {        background-color: lighten($color,15%);        transform: rotateY(-90deg) translateZ($size/2);    }    .face-haut {        background-color: darken($color,15%);        transform: rotateX(90deg) translateZ($size/2);     }    .face-bas {        background-color: darken($color,15%);        transform: rotateX(-90deg) translateZ($size/2);    }}@keyframes cubede {  from {    transform: rotateY(-20deg) rotateZ(0) rotateX(-20deg);  }  to {     transform: rotateY(-380deg) rotateZ(360deg) rotateX(-20deg) ;    } }

Pour cette solution, les points sont créés avec des pseudos éléments et positionnés avec 4 classes dédiées.

Code HTML :

<div class="container">
    <div class="cube-de">
        <div class="face face-avant face-1">
            <div class="point-1"></div>
        </div>
        <div class="face face-bas face-4">
            <div class="points-2"></div>
            <div class="points-2"></div>
        </div>
        <div class="face face-droite face-5">
            <div class="points-2"></div>
            <div class="point-1"></div>
            <div class="points-2"></div>
        </div>
        <div class="face face-gauche face-2">
            <div class="point-1-droite"></div>
            <div class="point-1-gauche"></div>
        </div>
        <div class="face face-haut face-3">
            <div class="point-1-droite"></div>
            <div class="point-1"></div>
            <div class="point-1-gauche"></div>
        </div>
        <div class="face face-arriere face-6">
            <div class="points-2"></div>
            <div class="points-2"></div>
            <div class="points-2"></div>
        </div>
    </div>
</div>

<div class="container">    <div class="cube-de">        <div class="face face-avant face-1">            <div class="point-1"></div>        </div>        <div class="face face-bas face-4">            <div class="points-2"></div>            <div class="points-2"></div>        </div>        <div class="face face-droite face-5">            <div class="points-2"></div>            <div class="point-1"></div>            <div class="points-2"></div>        </div>        <div class="face face-gauche face-2">            <div class="point-1-droite"></div>            <div class="point-1-gauche"></div>        </div>        <div class="face face-haut face-3">            <div class="point-1-droite"></div>            <div class="point-1"></div>            <div class="point-1-gauche"></div>        </div>        <div class="face face-arriere face-6">            <div class="points-2"></div>            <div class="points-2"></div>            <div class="points-2"></div>        </div>    </div></div>

Code CSS :

.container {
  padding: 60px;
  display: flex;
  justify-content: center;
}

.cube-de {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-20deg) rotateX(-20deg);
  animation: cubede 5s linear infinite;
  width: 100px;
  height: 100px;
}
.cube-de .face {
  position: absolute;
  width: 100px;
  height: 100px;
  opacity: 0.95;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  padding: 5%;
}
.cube-de .face div {
  width: 100%;
  height: 20%;
  display: flex;
  justify-content: space-around;
}
.cube-de .face div::before, .cube-de .face div::after {
  display: block;
  width: 20%;
  height: 100%;
  border-radius: 50%;
  background-color: #000;
  margin: auto;
  background-color: #000;
}
.cube-de .face div.point-1::before {
  content: "";
}
.cube-de .face div.point-1-droite::before, .cube-de .face div.point-1-droite::after {
  content: "";
}
.cube-de .face div.point-1-droite::after {
  background-color: transparent;
}
.cube-de .face div.point-1-gauche::before, .cube-de .face div.point-1-gauche::after {
  content: "";
}
.cube-de .face div.point-1-gauche::before {
  background-color: transparent;
}
.cube-de .face div.points-2::before, .cube-de .face div.points-2::after {
  content: "";
}
.cube-de .face-avant {
  background-color: #bbb;
  transform: translateZ(50px);
}
.cube-de .face-arriere {
  background-color: #bbb;
  transform: rotateY(180deg) translateZ(50px);
}
.cube-de .face-droite {
  background-color: #e1e1e1;
  transform: rotateY(90deg) translateZ(50px);
}
.cube-de .face-gauche {
  background-color: #e1e1e1;
  transform: rotateY(-90deg) translateZ(50px);
}
.cube-de .face-haut {
  background-color: #959595;
  transform: rotateX(90deg) translateZ(50px);
}
.cube-de .face-bas {
  background-color: #959595;
  transform: rotateX(-90deg) translateZ(50px);
}

@keyframes cubede {
  from {
    transform: rotateY(-20deg) rotateZ(0) rotateX(-20deg);
  }
  to {
    transform: rotateY(-380deg) rotateZ(360deg) rotateX(-20deg);
  }
}

.container {  padding: 60px;  display: flex;  justify-content: center;}.cube-de {  position: relative;  transform-style: preserve-3d;  transform: rotateY(-20deg) rotateX(-20deg);  animation: cubede 5s linear infinite;  width: 100px;  height: 100px;}.cube-de .face {  position: absolute;  width: 100px;  height: 100px;  opacity: 0.95;  display: flex;  flex-wrap: wrap;  justify-content: space-around;  align-items: center;  box-sizing: border-box;  padding: 5%;}.cube-de .face div {  width: 100%;  height: 20%;  display: flex;  justify-content: space-around;}.cube-de .face div::before, .cube-de .face div::after {  display: block;  width: 20%;  height: 100%;  border-radius: 50%;  background-color: #000;  margin: auto;  background-color: #000;}.cube-de .face div.point-1::before {  content: "";}.cube-de .face div.point-1-droite::before, .cube-de .face div.point-1-droite::after {  content: "";}.cube-de .face div.point-1-droite::after {  background-color: transparent;}.cube-de .face div.point-1-gauche::before, .cube-de .face div.point-1-gauche::after {  content: "";}.cube-de .face div.point-1-gauche::before {  background-color: transparent;}.cube-de .face div.points-2::before, .cube-de .face div.points-2::after {  content: "";}.cube-de .face-avant {  background-color: #bbb;  transform: translateZ(50px);}.cube-de .face-arriere {  background-color: #bbb;  transform: rotateY(180deg) translateZ(50px);}.cube-de .face-droite {  background-color: #e1e1e1;  transform: rotateY(90deg) translateZ(50px);}.cube-de .face-gauche {  background-color: #e1e1e1;  transform: rotateY(-90deg) translateZ(50px);}.cube-de .face-haut {  background-color: #959595;  transform: rotateX(90deg) translateZ(50px);}.cube-de .face-bas {  background-color: #959595;  transform: rotateX(-90deg) translateZ(50px);}@keyframes cubede {  from {    transform: rotateY(-20deg) rotateZ(0) rotateX(-20deg);  }  to {    transform: rotateY(-380deg) rotateZ(360deg) rotateX(-20deg);  }}

Code SCSS :

.container {
    padding: 60px;
    display: flex;
    justify-content: center;
}

$timing: 5s;
$size: 100px;
$color: #bbb;

.cube-de {
    position: relative;
    transform-style: preserve-3d;
    transform: rotateY(-20deg) rotateX(-20deg);
    animation: cubede $timing linear infinite;
    width: $size;
    height: $size;

    .face {
        position: absolute;
        width: $size;
        height: $size;
        opacity: 0.95;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        box-sizing: border-box;
        padding: 5%;

        div {
            width: 100%;
            height: 20%;
            display: flex;
            justify-content: space-around;

            &::before,
            &::after {
                display: block;
                width: 20%;
                height: 100%;
                border-radius: 50%;
                background-color: #000;
                margin: auto;
                background-color: #000;
            }

            &.point-1 {
                &::before {
                    content: '';
                }
            }

            &.point-1-droite {
                &::before,
                &::after {
                    content: '';
                }
                &::after {
                    background-color: transparent;
                }
            }

            &.point-1-gauche {
                &::before,
                &::after {
                    content: '';
                }
                &::before {
                    background-color: transparent;
                }
            }

            &.points-2 {
                &::before,
                &::after {
                    content: '';
                }
            }
        }
    }

    // Positionnement des faces
    .face-avant {
        background-color: $color;
        transform: translateZ($size/2);
    }

    .face-arriere {
        background-color: $color;
        transform: rotateY(180deg) translateZ($size/2);
    }

    .face-droite {
        background-color: lighten($color, 15%);
        transform: rotateY(90deg) translateZ($size/2);
    }

    .face-gauche {
        background-color: lighten($color, 15%);
        transform: rotateY(-90deg) translateZ($size/2);
    }

    .face-haut {
        background-color: darken($color, 15%);
        transform: rotateX(90deg) translateZ($size/2);
    }

    .face-bas {
        background-color: darken($color, 15%);
        transform: rotateX(-90deg) translateZ($size/2);
    }
}

@keyframes cubede {
    from {
        transform: rotateY(-20deg) rotateZ(0) rotateX(-20deg);
    }

    to {
        transform: rotateY(-380deg) rotateZ(360deg) rotateX(-20deg);
    }
}

.container {    padding: 60px;    display: flex;    justify-content: center;}$timing: 5s;$size: 100px;$color: #bbb;.cube-de {    position: relative;    transform-style: preserve-3d;    transform: rotateY(-20deg) rotateX(-20deg);    animation: cubede $timing linear infinite;    width: $size;    height: $size;    .face {        position: absolute;        width: $size;        height: $size;        opacity: 0.95;        display: flex;        flex-wrap: wrap;        justify-content: space-around;        align-items: center;        box-sizing: border-box;        padding: 5%;        div {            width: 100%;            height: 20%;            display: flex;            justify-content: space-around;            &::before,            &::after {                display: block;                width: 20%;                height: 100%;                border-radius: 50%;                background-color: #000;                margin: auto;                background-color: #000;            }            &.point-1 {                &::before {                    content: '';                }            }            &.point-1-droite {                &::before,                &::after {                    content: '';                }                &::after {                    background-color: transparent;                }            }            &.point-1-gauche {                &::before,                &::after {                    content: '';                }                &::before {                    background-color: transparent;                }            }            &.points-2 {                &::before,                &::after {                    content: '';                }            }        }    }    // Positionnement des faces    .face-avant {        background-color: $color;        transform: translateZ($size/2);    }    .face-arriere {        background-color: $color;        transform: rotateY(180deg) translateZ($size/2);    }    .face-droite {        background-color: lighten($color, 15%);        transform: rotateY(90deg) translateZ($size/2);    }    .face-gauche {        background-color: lighten($color, 15%);        transform: rotateY(-90deg) translateZ($size/2);    }    .face-haut {        background-color: darken($color, 15%);        transform: rotateX(90deg) translateZ($size/2);    }    .face-bas {        background-color: darken($color, 15%);        transform: rotateX(-90deg) translateZ($size/2);    }}@keyframes cubede {    from {        transform: rotateY(-20deg) rotateZ(0) rotateX(-20deg);    }    to {        transform: rotateY(-380deg) rotateZ(360deg) rotateX(-20deg);    }}

Animations complémentaires

HTML & CSS : En partant du cube, reproduisez approximativement l’animation suivante :

Sauf mention contraire*, l’article Cubes animés en CSS CSS21 et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution – Pas d’Utilisation Commerciale – Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.

S’abonner

Ce site utilise Akismet pour réduire les indésirables. Découvrez comment les données de vos commentaires sont traitées.

2 Commentaires

Le plus ancien

Le plus récent Le plus populaire

Jean-Pierre FOURY

5 années il y a

Débutant en html et css, j’ai fait des copier-coller des deux programmes, mais je n’obtiens qu’une page blanche…
Est ce que cela provient du fait que j’utilise Chrome comme navigateur ou d’autres raisons…
Je vous remercie d’éclairer ma lanterne

Répondre

Julien Crego

Auteur

Répondre à Jean-Pierre FOURY

Bonjour,
J’ai rajouté une solution avec le CSS complet. Il n’y a aucune raison que cela ne fonctionne pas sur Chrome…
J’en ai même profité pour ajouter une petite propriété supplémentaire (box-sizing).