Convertisseur Gratuit
Cube CSS 3D Générateur
Générez des animations de cubes CSS 3D avec des couleurs, tailles et effets personnalisés. Copiez instantanément le code HTML et CSS généré.
Épaisseur: 0px
Aperçu
Code généré
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D CSS Cube</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
background: #1a1a2e;
}
@keyframes cubeRotateY {
from { transform: rotateX(0deg) rotateY(0deg); }
to { transform: rotateX(0deg) rotateY(360deg); }
}
/* Cube Scene */
.cube-scene {
perspective: 800px;
width: 120px;
height: 120px;
}
/* Cube */
.cube {
width: 120px;
height: 120px;
position: relative;
transform-style: preserve-3d;
animation: cubeRotateY 4s linear infinite;
}
/* All Faces */
.cube-face {
position: absolute;
width: 120px;
height: 120px;
opacity: 1;
backface-visibility: visible;
}
/* Individual Faces */
.cube-face--front { background: #ff6b6b; transform: translateZ(60px); }
.cube-face--back { background: #4ecdc4; transform: rotateY(180deg) translateZ(60px); }
.cube-face--left { background: #45b7d1; transform: rotateY(-90deg) translateZ(60px); }
.cube-face--right { background: #f9ca24; transform: rotateY(90deg) translateZ(60px); }
.cube-face--top { background: #6c5ce7; transform: rotateX(90deg) translateZ(60px); }
.cube-face--bottom { background: #a8e6cf; transform: rotateX(-90deg) translateZ(60px); }
</style>
</head>
<body>
<div class="cube-scene">
<div class="cube">
<div class="cube-face cube-face--front"></div>
<div class="cube-face cube-face--back"></div>
<div class="cube-face cube-face--left"></div>
<div class="cube-face cube-face--right"></div>
<div class="cube-face cube-face--top"></div>
<div class="cube-face cube-face--bottom"></div>
</div>
</div>
</body>
</html>Outils Similaires
Voir tous les outilsCSS Flexbox Générateur de mise en page
Générez visuellement des mises en page CSS Flexbox avec aperçu en direct. Ajustez flex-direction, justify-content, align-items et plus — gratuit et côté client.
CSS Grid Générateur de Mise en Page
Générez visuellement des mises en page CSS Grid avec un aperçu en direct. Ajustez grid-template-columns, lignes, espacement, justify-items, align-items et plus — gratuit et côté client.
Générateur de Dégradés CSS
Générez visuellement des dégradés CSS avec un aperçu en direct. Créez des dégradés linéaires, radiaux et coniques avec des arrêts de couleur personnalisés — gratuit et côté client.
CSS Glassmorphism Générateur
Créez des effets de cartes glassmorphism époustouflants avec aperçu en temps réel.