Marcatura HTML :
```html
```
CSS :
```css
/* Contenitore cubo */
.cubo-contenitore {
larghezza:150px;
altezza:150px;
margine:0 automatico;
}
/* Cubo */
.cubo {
larghezza:100%;
altezza:100%;
stile trasformazione:preserva-3d;
animazione:rotateCube 10s lineare infinito;
}
/* Facce del cubo */
.viso {
larghezza:100%;
altezza:100%;
posizione:assoluta;
}
/* Faccia anteriore */
.fronte {
trasformazione:traduciZ(50px);
colore di sfondo:#ff0000;
}
/* Faccia posteriore */
.Indietro {
trasformazione:ruotaY(180deg) traduciZ(50px);
colore di sfondo:#00ff00;
}
/* Faccia sinistra */
.Sinistra {
trasformazione:ruotaY(-90deg) traduciZ(50px);
colore di sfondo:#0000ff;
}
/* Faccia destra */
.Giusto {
trasformazione:ruotaY(90deg) traduciZ(50px);
colore di sfondo:#ffff00;
}
/* Faccia superiore */
.superiore {
trasformazione:ruotaX(90°) traduciZ(50px);
colore di sfondo:#ff00ff;
}
/* Faccia inferiore */
.metter il fondo a {
trasformazione:ruotaX(-90deg) traduciZ(50px);
colore di sfondo:#00ffff;
}
/* Animazione della rotazione del cubo */
@keyframes ruotaCube {
0% {
trasformazione:ruotaY(0°) ruotaX(0°);
}
50% {
trasformazione:ruotaY(180°) ruotaX(0°);
}
100% {
trasformazione:ruotaY(360°) ruotaX(0°);
}
}
```
Questo codice crea un widget cubo rotante con sei facce. Il cubo ruota all'infinito attorno all'asse Y (orizzontalmente). Puoi regolare la velocità e la direzione di rotazione modificando i fotogrammi chiave dell'animazione `rotateCube`.
Domanda © www.354353.com