Πώς να δημιουργήσετε ένα γραφικό στοιχείο περιστρεφόμενου κύβου CSS;

Η δημιουργία ενός γραφικού στοιχείου περιστρεφόμενου κύβου CSS περιλαμβάνει τη χρήση τρισδιάστατων μετασχηματισμών και βασικών καρέ κινούμενων σχεδίων. Εδώ είναι ένας οδηγός βήμα προς βήμα:

Σήμανση HTML :

```html

```

CSS :

```css

/* Δοχείο κύβου */

.cube-container {

πλάτος:150 px;

ύψος:150 px;

περιθώριο:0 αυτόματο;

}

/* Κύβος */

.κύβος {

πλάτος:100%;

ύψος:100%;

μετασχηματισμός-στυλ:διατήρηση-3d;

animation:rotateCube 10s infinite linear?

}

/* Cube Faces */

.πρόσωπο {

πλάτος:100%;

ύψος:100%;

θέση:απόλυτη;

}

/* Μπροστινή όψη */

.μπροστινό {

transform:translateZ(50px);

χρώμα φόντου:#ff0000;

}

/* Πίσω πρόσωπο */

.πίσω {

transform:rotateY(180deg) translateZ(50px);

χρώμα φόντου:#00ff00;

}

/* Αριστερό πρόσωπο */

.αριστερά {

transform:rotateY(-90deg) translateZ(50px);

χρώμα φόντου:#0000ff;

}

/* Δεξί πρόσωπο */

.δεξιά {

transform:rotateY(90deg) translateZ(50px);

φόντο-χρώμα:#ffff00;

}

/* Επάνω πρόσωπο */

.κορυφή {

transform:rotateX(90deg) translateZ(50px);

φόντο-χρώμα:#ff00ff;

}

/* Κάτω όψη */

.κάτω {

transform:rotateX(-90deg) translateZ(50px);

χρώμα φόντου:#00ffff;

}

/* Κινούμενα σχέδια περιστροφής κύβου */

@keyframes rotateCube {

0% {

μετασχηματισμός:rotateY(0deg) rotateX(0deg);

}

50% {

μετασχηματισμός:rotateY(180deg) rotateX(0deg);

}

100% {

μετασχηματισμός:rotateY(360deg) rotateX(0deg);

}

}

```

Αυτός ο κώδικας δημιουργεί ένα περιστρεφόμενο γραφικό στοιχείο κύβου με έξι όψεις. Ο κύβος περιστρέφεται άπειρα γύρω από τον άξονα Υ (οριζόντια). Μπορείτε να προσαρμόσετε την ταχύτητα και την κατεύθυνση περιστροφής τροποποιώντας τα βασικά καρέ κίνησης «rotateCube».