| Bij het maken van een roterende CSS-kubuswidget worden 3D-transformaties en animatiehoofdframes gebruikt. Hier is een stapsgewijze handleiding:
HTML-opmaak :
```html
```
CSS :
```css
/* Kubuscontainer */
.cube-container {
breedte:150px;
hoogte:150px;
marge:0 automatisch;
}
/* Kubus */
.kubus {
breedte:100%;
hoogte:100%;
transform-stijl:behouden-3d;
animatie:rotatieCube 10s oneindig lineair;
}
/* Kubusvlakken */
.gezicht {
breedte:100%;
hoogte:100%;
positie:absoluut;
}
/* Voorkant */
.voorkant {
transformeren:vertalenZ(50px);
achtergrondkleur:#ff0000;
}
/* Achterkant */
.rug {
transformeren:roterenY(180 graden) vertalenZ(50px);
achtergrondkleur:#00ff00;
}
/* Linkergezicht */
.links {
transformeren:roterenY(-90deg) vertalenZ(50px);
achtergrondkleur:#0000ff;
}
/* Rechtergezicht */
.rechts {
transformeren:roterenY(90 graden) vertalenZ(50px);
achtergrondkleur:#ffff00;
}
/* Bovenkant */
.bovenkant {
transformeren:roterenX(90deg) vertalenZ(50px);
achtergrondkleur:#ff00ff;
}
/* Onderzijde */
.onderkant {
transformeren:roterenX(-90deg) vertalenZ(50px);
achtergrondkleur:#00ffff;
}
/* Kubusrotatie-animatie */
@keyframes rotatieCube {
0% {
transformeren:roterenY(0deg) roterenX(0deg);
}
50% {
transformeren:roterenY(180 graden) roterenX(0 graden);
}
100% {
transformeren:roterenY(360 graden) roterenX(0 graden);
}
}
```
Deze code creëert een roterende kubuswidget met zes vlakken. De kubus roteert oneindig rond de Y-as (horizontaal). U kunt de rotatiesnelheid en -richting aanpassen door de hoofdframes van de `rotateCube`-animatie aan te passen. |
