Cubo CSS 3D Generatore
Genera animazioni di cubi CSS 3D con colori, dimensioni ed effetti personalizzati. Copia istantaneamente il codice HTML e CSS generato.
<!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>Strumenti Correlati
Visualizza tutti gli strumentiFlexbox CSS Generatore di layout
Genera visivamente layout CSS Flexbox con anteprima dal vivo. Regola la direzione flessibile, giustifica il contenuto, allinea gli elementi e altro ancora: gratuitamente e lato client.
Griglia CSS Generatore di layout
Genera visivamente layout di griglia CSS con anteprima dal vivo. Regola le colonne del modello griglia, le righe, lo spazio, gli elementi giustificati, gli elementi allineati e altro ancora: gratuitamente e lato client.
Gradiente CSS Generatore
Genera visivamente gradienti CSS con anteprima dal vivo. Crea sfumature lineari, radiali e coniche con interruzioni di colore personalizzate, gratuite e lato client.
Glassmorfismo CSS Generatore
Crea straordinari effetti per le carte glassmorphism con anteprima in tempo reale. Personalizza istantaneamente sfocatura, opacità e colori.