A criação de um widget de cubo giratório CSS envolve o uso de transformações 3D e quadros-chave de animação. Aqui está um guia passo a passo:

Marcação HTML :

```html

```

CSS :

```css
/* Contêiner de cubo */
.cube-container {
largura:150px;
altura:150px;
margem:0 automático;
}

/* Cubo */
.cubo {
largura:100%;
altura:100%;
estilo de transformação:preserve-3d;
animação:rotateCube 10s linear infinito;
}

/* Faces do cubo */
.face {
largura:100%;
altura:100%;
posição:absoluta;
}

/* Face frontal */
.frente {
transformar:traduzirZ(50px);
cor de fundo:#ff0000;
}

/* Face posterior */
.voltar {
transformar:girarY(180deg) traduzirZ(50px);
cor de fundo:#00ff00;
}

/* Face Esquerda */
.esquerda {
transformar:girarY(-90deg) traduzirZ(50px);
cor de fundo:#0000ff;
}

/* Face Direita */
.certo {
transformar:girarY(90deg) traduzirZ(50px);
cor de fundo:#ffff00;
}

/* Face superior */
.principal {
transformar:girarX(90deg) traduzirZ(50px);
cor de fundo:#ff00ff;
}

/* Face Inferior */
.fundo {
transformar:girarX(-90deg) traduzirZ(50px);
cor de fundo:#00ffff;
}

/* Animação de rotação do cubo */
@keyframes girarCube {
0% {
transformar:girarY(0deg) girarX(0deg);
}
50% {
transformar:girarY (180 graus) girar X (0 graus);
}
100% {
transformar:girarY (360 graus) girar X (0 graus);
}
}
```

Este código cria um widget de cubo giratório com seis faces. O cubo gira infinitamente em torno do eixo Y (horizontalmente). Você pode ajustar a velocidade e direção de rotação modificando os quadros-chave da animação `rotateCube`.