Marcado HTML :
```html
```
CSS :
```css
/* Contenedor de cubos */
.cubo-contenedor {
ancho:150 px;
altura:150 px;
margen:0 automático;
}
/* Cubo */
.cubo {
ancho:100%;
altura:100%;
estilo de transformación:preservar-3d;
animación:rotarCube 10s infinito lineal;
}
/* Caras de cubo */
.rostro {
ancho:100%;
altura:100%;
posición:absoluta;
}
/* Cara frontal */
.frente {
transformar:traducirZ(50px);
color de fondo:#ff0000;
}
/* Cara posterior */
.atrás {
transformar:rotarY(180deg) traducirZ(50px);
color de fondo:#00ff00;
}
/* Cara Izquierda */
.izquierda {
transformar:rotarY(-90deg) traducirZ(50px);
color de fondo:#0000ff;
}
/* Cara derecha */
.bien {
transformar:rotarY(90deg) traducirZ(50px);
color de fondo:#ffff00;
}
/* Cara superior */
.arriba {
transformar:rotarX(90deg) traducirZ(50px);
color de fondo:#ff00ff;
}
/* Cara inferior */
.abajo {
transformar:rotarX(-90deg) traducirZ(50px);
color de fondo:#00ffff;
}
/* Animación de rotación del cubo */
@keyframes rotarCubo {
0% {
transformar:rotarY(0grados) rotarX(0grados);
}
50% {
transformar:rotarY (180 grados) rotar X (0 grados);
}
100% {
transformar:rotarY (360 grados) rotar X (0 grados);
}
}
```
Este código crea un widget de cubo giratorio con seis caras. El cubo gira infinitamente alrededor del eje Y (horizontalmente). Puede ajustar la velocidad y dirección de rotación modificando los fotogramas clave de animación "rotateCube".