Cub CSS 3D Generador
Genereu animacions de cub CSS 3D amb colors, mides i efectes personalitzats. Copieu el codi HTML i CSS generat a l'instant.
<!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>Eines relacionades
Veure totes les einesCSS Flexbox Generador de maquetació
Genereu visualment dissenys CSS Flexbox amb vista prèvia en directe. Ajusteu la direcció flexible, el contingut de justificació, els elements d'alineació i molt més: gratuït i del costat del client.
Quadrícula CSS Generador de maquetació
Genereu visualment dissenys de quadrícula CSS amb vista prèvia en directe. Ajusteu les columnes de la plantilla de la quadrícula, les files, el buit, els elements de justificació, els elements d'alineació i molt més: gratuïts i del costat del client.
Gradient CSS Generador
Genereu visualment gradients CSS amb vista prèvia en directe. Creeu degradats lineals, radials i cònics amb parades de color personalitzades: gratuïtes i del costat del client.
Glassmorfisme CSS Generador
Crea impressionants efectes de targeta de morfisme de vidre amb vista prèvia en temps real. Personalitza el desenfocament, l'opacitat i els colors a l'instant.