CSS tip: Ομαλή περιστροφή στοιχείων

CSS

Η χρήση CSS για κινούμενα εφέ έχει εξελιχθεί σημαντικά τα τελευταία χρόνια, επιτρέποντας πλέον προηγμένες αλληλεπιδράσεις χωρίς τη χρήση JavaScript. Ένα από τα πιο εντυπωσιακά παραδείγματα είναι η ομαλή περιστροφή στοιχείων, η οποία μπορεί να ελεγχθεί εξ ολοκλήρου με σύγχρονες CSS τεχνικές, όπως οι ιδιότητες @property και μαθηματικές συναρτήσεις.

Πώς Λειτουργεί ο Κώδικας

Ο κώδικας που παρουσιάζουμε χρησιμοποιεί προσαρμοσμένες CSS μεταβλητές και το rotate για να επιτύχει δυναμική περιστροφή ενός στοιχείου με ελάχιστο κώδικα και χωρίς βασικά καρέ (keyframes). Ας αναλύσουμε τα βασικά του σημεία.

Ορισμός Custom Properties (@property)

@property --a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@property --i {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --j {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

Εδώ δηλώνουμε τρεις custom CSS μεταβλητές:

  • --a: Χρησιμοποιείται για τη γωνία περιστροφής.
  • --i: Ελέγχει τη διακοπή και την επανεκκίνηση της περιστροφής.
  • --j: Καθορίζει την ταχύτητα περιστροφής.

Βασικός Μηχανισμός Περιστροφής

.box {
  --t: 1turn; /* Η πλήρης περιστροφή */
  --d: .8s;   /* Διάρκεια επιστροφής στην αρχική κατάσταση */

  rotate: calc(mod(var(--a),var(--t)/2)*var(--i) + clamp(var(--t)/-2*var(--i),(var(--t)/2 - mod(var(--a),var(--t)))*9999,0deg));
  transition: --i var(--d),--a 0s var(--d),--j var(--d);
}

Εδώ χρησιμοποιούμε τη συνάρτηση mod() για να διατηρήσουμε την περιστροφή σε λογικά όρια και τη clamp() για να επιτύχουμε μια ομαλή επαναφορά στη φυσική θέση του στοιχείου.

Αλληλεπίδραση με τον Χρήστη

.box:hover {
  --i: 1;
  --a: calc(15turn*var(--j));
  transition: --i 0s,--a 30s linear,--j .5s;
}

.box:active {
  --j: 2; /* Επιτάχυνση περιστροφής */
}
  • Με την κίνηση του ποντικιού πάνω στο στοιχείο (:hover), η ιδιότητα --a αναβαθμίζεται σε μεγαλύτερη τιμή, προκαλώντας περιστροφή.
  • Αν γίνει κλικ (:active), η μεταβλητή --j αυξάνει την ταχύτητα περιστροφής, επιταχύνοντας το εφέ.

Πηγή: css-tip.com

ΣΧΕΤΙΚΑ ΑΡΘΡΑ