Comment faire un cube 3D qui tourne en CSS

Comment faire un cube 3D qui tourne en CSS
Photo by teleterapia.fi / Unsplash

Dans ce tutoriel, nous allons apprendre comment créer un cube 3D qui tourne en utilisant uniquement HTML et CSS. Les animations et transformations 3D sont des fonctionnalités puissantes de CSS qui peuvent être utilisées pour créer des effets visuels impressionnants sans recourir à des images, des vidéos ou des scripts. Préparez-vous à donner vie à vos pages Web avec cet effet de cube 3D tournant !

Étape 1 : Créer la structure HTML Tout d'abord, nous devons créer la structure HTML de base pour notre cube 3D. Créez un nouveau fichier HTML et ajoutez le code suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cube 3D en CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="scene">
        <div class="cube">
            <div class="face front"></div>
            <div class="face back"></div>
            <div class="face right"></div>
            <div class="face left"></div>
            <div class="face top"></div>
            <div class="face bottom"></div>
        </div>
    </div>
</body>
</html>
HTML

Nous avons créé un conteneur pour notre scène 3D appelé "scene" et un autre conteneur pour notre cube appelé "cube". Chaque face du cube est représentée par un élément "div" avec la classe "face" et une classe supplémentaire pour identifier la face spécifique (front, back, right, left, top, bottom).

Étape 2 : Appliquer le style CSS Créez maintenant un nouveau fichier CSS appelé "style.css" et ajoutez le code suivant :

body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.scene {
    width: 200px;
    height: 200px;
    perspective: 800px;
}

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: rotate-cube 6s infinite linear;
}

.face {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 255, 0.3);
    border: 2px solid rgba(0, 0, 0, 0.5);
}

.front {
    transform: translateZ(100px);
}

.back {
    transform: translateZ(-100px) rotateY(180deg);
}

.right {
    transform: rotateY(90deg) translateZ(100px);
}

.left {
    transform: rotateY(-90deg) translateZ(100px);
}

.top {
    transform: rotateX(90deg) translateZ(100px);
}

.bottom {
    transform: rotateX(-90deg) translateZ(100px);
}

@keyframes rotate-cube {
    0% {
        transform: rotate3d(0, 1, 0, 0deg);
    }
    100% {
        transform: rotate3d(0, 1, 0, 360deg);
    }
}
CSS

Voici une explication des styles CSS appliqués :

  1. Le style "body" assure que la scène est centrée dans la fenêtre du navigateur.
  2. La classe "scene" définit la taille de la scène et la perspective 3D.
  3. La classe "cube" définit la taille, la position et le style de transformation 3D. L'animation "rotate-cube" est appliquée pour faire tourner le cube.
  4. La classe "face" définit les dimensions, la position et le style de base pour chaque face du cube.
  5. Les classes "front", "back", "right", "left", "top" et "bottom" positionnent chaque face du cube en utilisant les transformations 3D.
  6. La règle "@keyframes" définit l'animation "rotate-cube" qui fait tourner le cube autour de l'axe Y de 0 à 360 degrés.

Étape 3 : Tester le cube 3D tournant Ouvrez le fichier HTML dans votre navigateur et observez le résultat : un cube 3D tournant avec des faces semi-transparentes et des bordures pour mieux visualiser sa structure.

Dans ce tutoriel, nous avons appris à créer un cube 3D qui tourne en utilisant uniquement HTML et CSS. Vous pouvez maintenant expérimenter avec les styles et les animations pour créer des effets encore plus impressionnants. Essayez de changer les couleurs, la taille, les animations ou même d'ajouter du contenu à l'intérieur du cube. Les possibilités sont infinies et ne sont limitées que par votre imagination !

Cube 3D en CSS