Att skapa en widget för roterande CSS-kub innebär att man använder 3D-transformationer och animerade nyckelrutor. Här är en steg-för-steg-guide:
HTML-märkning :
```html
```
CSS :
``` css
/* Kubbehållare */
.cube-container {
bredd:150px;
höjd:150px;
marginal:0 auto;
}
/* Kub */
.cube {
bredd:100%;
höjd:100%;
transform-stil:bevara-3d;
animation:rotateCube 10s oändligt linjär;
}
/* Cube Faces */
.face {
bredd:100%;
höjd:100%;
position:absolut;
}
/* Framsida */
.front {
transform:translateZ(50px);
bakgrundsfärg:#ff0000;
}
/* Baksida */
.back {
transform:rotateY(180deg) translateZ(50px);
bakgrundsfärg:#00ff00;
}
/* Vänster ansikte */
.left {
transform:rotateY(-90deg) translateZ(50px);
bakgrundsfärg:#0000ff;
}
/* Höger ansikte */
.right {
transform:rotateY(90deg) translateZ(50px);
bakgrundsfärg:#ffff00;
}
/* Top Face */
.top {
transform:rotateX(90deg) translateZ(50px);
bakgrundsfärg:#ff00ff;
}
/* Undersidan */
.bottom {
transform:rotateX(-90deg) translateZ(50px);
bakgrundsfärg:#00ffff;
}
/* Kubrotationsanimering */
@keyframes rotateCube {
0 % {
transform:rotateY(0deg) rotateX(0deg);
}
50 % {
transform:rotateY(180deg) rotateX(0deg);
}
100 % {
transform:rotateY(360deg) rotateX(0deg);
}
}
```
Den här koden skapar en roterande kubwidget med sex ytor. Kuben roterar oändligt runt Y-axeln (horisontellt). Du kan justera rotationshastigheten och riktningen genom att modifiera "rotateCube"-animeringsnyckelrutor.
