Å lage en CSS-roterende kubewidget innebærer bruk av 3D-transformasjoner og animasjonsnøkkelrammer. Her er en steg-for-steg guide:
HTML-oppmerking :
```html
```
CSS :
```css
/* Kubebeholder */
.cube-container {
bredde:150px;
høyde:150px;
margin:0 auto;
}
/* Kube */
.cube {
bredde:100 %;
høyde:100 %;
transform-stil:bevar-3d;
animasjon:rotateCube 10s uendelig lineær;
}
/* Cube Faces */
.face {
bredde:100 %;
høyde:100 %;
posisjon:absolutt;
}
/* Forside */
.front {
transform:translateZ(50px);
bakgrunnsfarge:#ff0000;
}
/* Bakside */
.back {
transform:rotateY(180deg) translateZ(50px);
bakgrunnsfarge:#00ff00;
}
/* Venstre ansikt */
.left {
transform:rotateY(-90deg) translateZ(50px);
bakgrunnsfarge:#0000ff;
}
/* Høyre ansikt */
.right {
transform:rotateY(90deg) translateZ(50px);
bakgrunnsfarge:#ffff00;
}
/* Toppansikt */
.top {
transform:rotateX(90deg) translateZ(50px);
bakgrunnsfarge:#ff00ff;
}
/* Underside */
.bottom {
transform:rotateX(-90deg) translateZ(50px);
bakgrunnsfarge:#00ffff;
}
/* Cube Rotation Animation */
@keyframes rotateCube {
0 % {
transform:rotateY(0deg) rotateX(0deg);
}
50 % {
transform:rotateY(180deg) rotateX(0deg);
}
100 % {
transform:rotateY(360deg) rotateX(0deg);
}
}
```
Denne koden lager en roterende kube-widget med seks flater. Terningen roterer uendelig rundt Y-aksen (horisontalt). Du kan justere rotasjonshastigheten og -retningen ved å endre "rotateCube"-animasjonsnøkkelframene.
