Ako vytvoriť miniaplikáciu CSS Rotating Cube?

Vytvorenie widgetu rotujúcej kocky CSS zahŕňa použitie 3D transformácií a kľúčových snímok animácie. Tu je podrobný návod:

Značka HTML :

```html

```

CSS :

```css

/* Nádoba na kocky */

.cube-container {

šírka:150px;

výška:150px;

okraj:0 auto;

}

/* Kocka */

.cube {

šírka:100 %;

výška:100 %;

transformačný štýl:zachovať-3d;

animácia:rotationCube 10s infinite linear;

}

/* Cube Faces */

.face {

šírka:100 %;

výška:100 %;

pozícia:absolútna;

}

/* Predná strana */

.front {

transform:translateZ(50px);

farba pozadia:#ff0000;

}

/* Zadná strana */

.späť {

transformácia:otočiťY(180°) preložiťZ(50px);

farba pozadia:#00ff00;

}

/* Ľavá tvár */

.left {

transformácia:otočiťY(-90 stupňov) preložiťZ(50px);

farba pozadia:#0000ff;

}

/* Pravá tvár */

.vpravo {

transformácia:otočiťY(90°) preložiťZ(50px);

farba pozadia:#ffff00;

}

/* Horná strana */

.top {

transformácia:otočiťX(90°) preložiťZ(50px);

farba pozadia:#ff00ff;

}

/* Spodná časť */

.bottom {

transformácia:otočiťX(-90 stupňov) translateZ(50px);

farba pozadia:#00ffff;

}

/* Animácia rotácie kocky */

@keyframes rotationCube {

0 % {

transformácia:otočiťY(0deg) otočiťX(0deg);

}

50 % {

transformácia:rotáciaY(180°) rotáciaX(0°);

}

100 % {

transformácia:rotáciaY(360°) rotáciaX(0°);

}

}

```

Tento kód vytvorí miniaplikáciu rotujúcej kocky so šiestimi plochami. Kocka sa nekonečne otáča okolo osi Y (horizontálne). Rýchlosť a smer otáčania môžete upraviť úpravou kľúčových snímok animácie `rotateCube`.

• Predchádzajúca strana: Ako odstrániť rýchle odkazy a spravodajský kanál na stránke novej karty v Microsoft Edge? 
• Ďalšia strana: Ako zastaviť automatické platby v PayPal?