Μετασχηματισμός-προέλευση - CSS-Κόλπα

Η transform-originιδιότητα χρησιμοποιείται σε συνδυασμό με μετασχηματισμούς CSS, επιτρέποντάς σας να αλλάξετε το σημείο προέλευσης ενός μετασχηματισμού.

.box ( transform: rotate(360deg); transform-origin: top left; )

Όπως αναφέρθηκε παραπάνω, η transform-originιδιότητα μπορεί να λάβει έως και δύο τιμές λέξεων-κλειδιών ή μήκους διαχωρισμένων με χώρο για έναν μετασχηματισμό 2D και έως και τρεις τιμές για έναν μετασχηματισμό 3D.

Η χρήση του παραπάνω κωδικού σε πλαίσιο 200 εικονοστοιχείων με 200 εικονοστοιχεία, με τον μετασχηματισμό που εφαρμόζεται σε μετάβαση με χρήση συμβάντος κλικ, θα συμπεριφερόταν ως εξής:

Δείτε αυτό το στυλό!

Από προεπιλογή, η προέλευση ενός μετασχηματισμού είναι "50% 50%", το οποίο βρίσκεται ακριβώς στο κέντρο οποιουδήποτε δεδομένου στοιχείου. Η αλλαγή της προέλευσης σε «πάνω αριστερά» (όπως στην παραπάνω επίδειξη) αναγκάζει το στοιχείο να χρησιμοποιήσει την επάνω αριστερή γωνία του στοιχείου ως σημείο περιστροφής.

Οι τιμές μπορεί να είναι μήκη, τα ποσοστά ή τις λέξεις-κλειδιά top, left, right, bottom, και center.

Η πρώτη τιμή είναι η οριζόντια θέση, η δεύτερη τιμή είναι η κάθετη και η τρίτη τιμή αντιπροσωπεύει τη θέση στον άξονα Ζ. Η τρίτη τιμή θα λειτουργεί μόνο εάν χρησιμοποιείτε μετασχηματισμούς 3D και δεν μπορεί να είναι ποσοστό.

Δείτε την εικόνα Pen-transform από την Shaw (@shshaw) στο CodePen.