Das Erstellen eines CSS-Widgets für rotierende Würfel erfordert die Verwendung von 3D-Transformationen und Animations-Keyframes. Hier ist eine Schritt-für-Schritt-Anleitung:
HTML-Markup :
```html
„
CSS :
„css
/* Würfelbehälter */
.cube-container {
Breite:150px;
Höhe:150px;
Rand:0 automatisch;
}
/* Würfel */
.cube {
Breite:100 %;
Höhe:100 %;
Transformationsstil:Preserve-3d;
Animation:rotateCube 10s unendlich linear;
}
/* Würfelflächen */
.Gesicht {
Breite:100 %;
Höhe:100 %;
Position:absolut;
}
/* Vorderseite */
.front {
transform:TranslateZ(50px);
Hintergrundfarbe:#ff0000;
}
/* Rückseite */
.zurück {
transformieren:rotationY(180deg) translatorZ(50px);
Hintergrundfarbe:#00ff00;
}
/* Linke Seite */
.links {
transform:rotateY(-90deg) translatorZ(50px);
Hintergrundfarbe:#0000ff;
}
/* Rechtes Gesicht */
.Rechts {
transformieren:rotationY(90deg) translatorZ(50px);
Hintergrundfarbe:#ffff00;
}
/* Oberseite */
.Spitze {
transformieren:rotateX(90deg) translatorZ(50px);
Hintergrundfarbe:#ff00ff;
}
/* Unterseite */
.unten {
transform:rotateX(-90deg) translatorZ(50px);
Hintergrundfarbe:#00ffff;
}
/* Würfelrotationsanimation */
@keyframes rotateCube {
0 % {
transformieren:rotierenY(0deg) rotierenX(0deg);
}
50 % {
transformieren:rotierenY(180°) rotierenX(0°);
}
100 % {
transformieren:rotierenY(360°) rotierenX(0°);
}
}
„
Dieser Code erstellt ein rotierendes Würfel-Widget mit sechs Flächen. Der Würfel dreht sich unendlich um die Y-Achse (horizontal). Sie können die Rotationsgeschwindigkeit und -richtung anpassen, indem Sie die Keyframes der „rotateCube“-Animation ändern.
