Comment créer un cube 3D animé en CSS pure et HTML
Vous voulez ajouter un peu de mouvement et de dynamisme à votre site web ?
Pourquoi ne pas essayer de créer un cube 3D animé en utilisant du CSS ?
C’est un moyen simple et amusant de donner vie à vos pages web et de surprendre vos visiteurs.Pour créer un cube 3D animé en CSS, vous avez besoin de quelques connaissances de base en HTML et en CSS.
Vous pouvez utiliser un éditeur de code HTML et CSS pour créer votre cube, comme Visual Studio Code ou Sublime Text.
Voici comment procéder étape par étape :
Lien vers le repo GIT
https://github.com/robertomas/rotating-3D-cubes-using-only-CSS
Voici les étapes
1. Créez une nouvelle page HTML et ajoutez le code HTML pour afficher votre cube 3D animé dans votre page web. Utilisez une div avec la classe CSS de votre cube et ajoutez plusieurs div pour chaque face du cube, en utilisant les classes CSS correspondantes pour définir leur apparence et leur position.
<!-- La balise "div" avec la classe "scene" définit l'élément HTML qui va contenir le cube -->
<div class="scene">
<!-- La balise "div" avec la classe "cube" définit l'élément HTML qui représente le cube -->
<div class="cube">
<!-- Les balises "div" avec les classes "cube-face" définissent les faces du cube et leur contenu respectif -->
<div class="cube-face face-front">front</div>
<div class="cube-face face-back">back</div>
<div class="cube-face face-right">right</div>
<div class="cube-face face-left">left</div>
<div class="cube-face face-top">top</div>
<div class="cube-face face-bottom">bottom</div>
</div>
</div>
2. ajoutez une section de style dans laquelle vous allez définir les règles CSS pour votre cube. Définissez les dimensions et la bordure de la « scène » 3D dans laquelle votre cube va être affiché. Vous pouvez utiliser la propriété CSS « perspective » pour définir l’effet de profondeur de la scène.
<style>
/*
La classe "scene" définit la scène 3D dans laquelle le cube va être affiché.
La propriété "perspective" définit l'espace de visualisation et permet de donner l'impression de profondeur
*/
.scene {
width: 200px;
height: 200px;
border: 1px solid #ccc;
margin: 80px;
perspective: 400px;
}
</style>
3. Créez une classe CSS pour votre cube et définissez ses dimensions, sa position et ses propriétés de transformation. Utilisez la propriété « transform-style » pour préserver l’espace 3D de l’élément et la propriété « transform » pour le déplacer en arrière-plan. Vous pouvez également utiliser une transition pour animer la transformation de l’élément sur une durée de votre choix.
<style>
/*
La classe "cube" définit le cube 3D lui-même.
La propriété "transform-style" permet de préserver l'espace 3D des éléments enfants du cube
La propriété "transform: translateZ(-100px)" permet de déplacer le cube vers l'arrière de la scène
La propriété "transition" définit l'animation lorsque le cube est transformé
La propriété "animation" définit une animation infinie de rotation sur l'axe Y
*/
.cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
transform: translateZ(-100px);
transition: transform 1s;
animation: rotate 3s ease-in-out infinite;
}
</style>
4. Créez une classe CSS pour chaque face du cube et définissez sa couleur et sa position en utilisant des propriétés de transformation. Vous pouvez utiliser la propriété « rotateY » pour tourner chaque face autour de l’axe Y et la propriété « translateZ » pour déplacer chaque face en avant ou en arrière.
<style>
/*
La classe "cube-face" définit les faces du cube.
La propriété "position: absolute" permet de positionner chaque face absolument par rapport au cube
La propriété "transform" permet de faire pivoter chaque face selon l'angle souhaité
*/
.cube-face {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 200px;
height: 200px;
border: 2px solid #000;
font-size: 40px;
font-weight: bold;
color: #ccc;
text-align: center;
}
/* Les classes "face-front", "face-back", etc. définissent chaque face du cube et leur couleur de fond respective */
.face-front {
background: hsla(0, 100%, 50%, 0.7);
transform: rotateY(0deg) translateZ(100px);
}
.face-back {
background: hsla(60, 100%, 50%, 0.7);
transform: rotateY(90deg) translateZ(100px);
}
.face-right {
background: hsla(120, 100%, 50%, 0.7);
transform: rotateY(180deg) translateZ(100px);
}
.face-left {
background: hsla(180, 100%, 50%, 0.7);
transform: rotateY(-90deg) translateZ(100px);
}
.face-top {
background: hsla(240, 100%, 50%, 0.7);
transform: rotateX(90deg) translateZ(100px);
}
.face-bottom {
background: hsla(300, 100%, 50%, 0.7);
transform: rotateX(-90deg) translateZ(100px);
}
</style>
5. Créez une animation CSS pour faire tourner votre cube sur lui-même en utilisant la clé @keyframes et en spécifiant les valeurs de départ et de fin pour la transformation de l’élément. Vous pouvez utiliser la propriété « animation » pour appliquer l’animation à votre cube.
<style>
/* L'animation "rotate" définit une rotation infinie sur l'axe Y à partir de l'angle de départ (0deg) jusqu'à l'angle final (360deg) */
@keyframes rotate {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
</style>
Voilà, votre cube 3D animé est maintenant prêt à être affiché sur votre page web ! Vous pouvez jouer avec les différentes propriétés CSS pour personnaliser l’apparence et le comport
Code complet
<style>
.scene {
width: 200px;
height: 200px;
border: 1px solid #ccc;
margin: 80px;
perspective: 400px;
}
.cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
transform: translateZ(-100px);
transition: transform 1s;
animation: rotate 3s ease-in-out infinite;
}
.cube-face {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 200px;
height: 200px;
border: 2px solid #000;
font-size: 40px;
font-weight: bold;
color: #ccc;
text-align: center;
}
.face-front {
background: hsla(0, 100%, 50%, 0.7);
transform: rotateY(0deg) translateZ(100px);
}
.face-back {
background: hsla(60, 100%, 50%, 0.7);
transform: rotateY(90deg) translateZ(100px);
}
.face-right {
background: hsla(120, 100%, 50%, 0.7);
transform: rotateY(180deg) translateZ(100px);
}
.face-left {
background: hsla(180, 100%, 50%, 0.7);
transform: rotateY(-90deg) translateZ(100px);
}
.face-top {
background: hsla(240, 100%, 50%, 0.7);
transform: rotateX(90deg) translateZ(100px);
}
.face-bottom {
background: hsla(300, 100%, 50%, 0.7);
transform: rotateX(-90deg) translateZ(100px);
}
@keyframes rotate {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
</style>
<div class="scene">
<div class="cube">
<div class="cube-face face-front">front</div>
<div class="cube-face face-back">back</div>
<div class="cube-face face-right">right</div>
<div class="cube-face face-left">left</div>
<div class="cube-face face-top">top</div>
<div class="cube-face face-bottom">bottom</div>
</div>
</div>
