Oprettelse af en CSS-roterende kube-widget involverer brug af 3D-transformationer og animations-keyframes. Her er en trin-for-trin guide:
HTML Markup :
```html
```
CSS :
```css
/* Terningbeholder */
.cube-container {
bredde:150px;
højde:150px;
margin:0 auto;
}
/* Terning */
.cube {
bredde:100%;
højde:100%;
transform-stil:bevar-3d;
animation:rotateCube 10s uendelig lineær;
}
/* Cube Faces */
.face {
bredde:100%;
højde:100%;
position:absolut;
}
/* Forside */
.front {
transform:translateZ(50px);
baggrundsfarve:#ff0000;
}
/* Bagside */
.back {
transform:rotateY(180deg) translateZ(50px);
baggrundsfarve:#00ff00;
}
/* Venstre ansigt */
.left {
transform:rotateY(-90deg) translateZ(50px);
baggrundsfarve:#0000ff;
}
/* Højre ansigt */
.right {
transform:rotateY(90deg) translateZ(50px);
baggrundsfarve:#ffff00;
}
/* Top Face */
.top {
transform:rotateX(90deg) translateZ(50px);
baggrundsfarve:#ff00ff;
}
/* Underside */
.bottom {
transform:rotateX(-90deg) translateZ(50px);
baggrundsfarve:#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 kode opretter en roterende kube-widget med seks flader. Terningen roterer uendeligt rundt om Y-aksen (vandret). Du kan justere rotationshastigheden og -retningen ved at ændre 'rotateCube'-animationens keyframes.
