css3.gr

Στο τρίτο και προτελευταίο μέρος του οδηγού, θα παρουσιάσω τους δισδιάστατους μετασχηματισμούς που έχουν προταθεί για το πρότυπο CSS 3, κρατώντας τους τρισδιάστατους για το τέλος.

Χωρίς να θέλω να σας τρομάξω, τα 2D transforms εισάγουν αρκετές μαθηματικές έννοιες, με κύρια αυτή της θεωρίας πινάκων. Όσοι γνωρίζουν από πίνακες, μετασχηματισμούς και συστήματα συντεταγμένων θα νιώσουν γνώριμα εδώ (ειδικά όσοι έχουν ασχοληθεί με OpenGL), παρόλα αυτά ο οδηγός αυτός έχει σκοπό να μυήσει όλους στο νέο αυτό module, χωρίς περαιτέρω εμβάθυνση σε μαθηματικούς όρους.

Έτσι λοιπόν, όταν αναφερόμαστε σε μετασχηματισμούς ενός αντικειμένου στις δύο διαστάσεις (πάνω σε ένα χαρτί για παράδειγμα), εννοούμε (χονδρικά) τρεις βασικές ενέργειες: μετατόπιση (translation), περιστροφή (rotation) και κλιμάκωση (scaling). Υπάρχει επίσης και ο μετασχηματισμός μέσω πίνακα (transformation matrix) και το "λύγισμα" (skew) του αντικειμένου, αλλά εμείς θα επικεντρωθούμε στην παρούσα φάση στα τρία βασικά.

transform

Για να μετασχηματίσουμε ένα στοιχείο με το CSS 3 2D transforms module, χρησιμοποιούμε την δήλωση "transform" στον selector του αντικειμένου. Η δήλωση αυτή, περιέχει σε σειρά όλους τους μετασχηματισμούς που θέλουμε να ενεργήσουν στο αντικείμενο. Οι μετασχηματισμοί εκτελούνται με την σειρά που δίνονται στην δήλωση.

Οι μετασχηματισμοί αυτοί μπορεί να είναι οι εξής:

none

Αρχική τιμή του transform χαρακτηριστικού. Προφανώς σε φάση 'none' δεν υπάρχει μετασχηματισμός.

matrix(<αριθμός>, <αριθμός>, <αριθμός>, <αριθμός>,<αριθμός>, <αριθμός>)

Ο συγκεκριμένος μετασχηματισμός ουσιαστικά πολλαπλασιάζει το....ερμ ας μην ξεφύγω σε μαθηματικά. Επειδή μπλέκεται με θεωρία πινάκων, να πω πως μόνο αν γνωρίζετε από πίνακες, ο συγκεκριμένος μετασχηματισμός σας λύνει τα χέρια. Για περισσότερα ρίξτε μια ματιά στην αντίστοιχη ενότητα της W3C ή ακόμη καλύτερα στην Wikipedia.

translate(<τιμή>, <τιμή>)

Μετατοπίζει το αντικείμενο στον οριζόντιο και κάθετο άξονα αντίστοιχα, βάση της <τιμής> που έχει οριστεί. Η <τιμή> είναι εκφρασμένη είτε σε pixels είτε ποσοστιαία (π.χ. 20%). Αν η δεύτερη τιμή παραλειφθεί, τότε η μετατόπιση στον κάθετο άξονα είναι μηδέν.

translateX(<τιμή>)

Μετατόπιση μόνο κατά τον οριζόντιο άξονα, βάσει της <τιμής>.

translateY(<τιμή>)

Μετατόπιση μόνο κατά τον κάθετο άξονα, βάσει της <τιμής>. (Δεν είναι τόσο δύσκολα τελικά, έτσι;)

scale(<αριθμός>, <αριθμός>)

Κλιμάκωση (δηλαδή μεγέθυνση ή σμίκρυνση) του αντικειμένου τόσο στον οριζόντιο όσο και στον κάθετο άξονα. Αν ο δεύτερος αριθμός παραληφθεί, η κλιμάκωση στον κάθετο άξονα είναι μηδέν.

Οι <αριθμοί> ορίζουν αν η κλιμάκωση είναι σμίκρυνση ή μεγέθυνση. Αν ο <αριθμός> είναι μεγαλύτερος της μονάδας το αντικείμενο μεγεθύνεται (αν για παράδειγμα ο <αριθμός> είναι 2, τότε το αντικείμενο γίνεται διπλάσιο), ενώ αν είναι μικρότερος της μονάδας το αντικείμενο μικραίνει (για 0.5 γίνεται το μισό). Αν ο αριθμός είναι 1 τότε το αντικείμενο έρχεται στην πραγματική του διάσταση.

scaleX(<αριθμός>)

Κλιμάκωση μόνο κατά τον οριζόντιο άξονα.

scaleY(<αριθμός>)

Κλιμάκωση μόνο κατά τον κατακόρυφο άξονα.

rotate(<γωνία>)

Περιστροφή του αντικειμένου κατά μοίρες που ορίζει η <γωνία> γύρω από το κέντρο περιστροφής του (και άξονα κάθετο στην επιφάνεια μας) που ορίζεται από την ιδιότητα transform-origin που θα εξηγήσουμε παρακάτω.

Η <γωνία> ορίζεται ως αριθμός, ακολουθούμενος από την μονάδα μέτρησης που μπορεί να είναι deg (degrees), grad (grads), rad (radians) ή turn (turns).

skewX(<γωνία>)

"Λύγισμα" (ναι δεν βρήκα καλύτερη μετάφραση) του αντικειμένου κατά τον οριζόντιο άξονα ανάλογα με τον τύπο περιστροφής που δίνεται από την <γωνία>.

skewY(<γωνία>)

"Λύγισμα" κατά τον κατακόρυφο άξονα.

skew(<γωνία>, <γωνία>)

Και τέλος "λύγισμα" και στους δύο άξονες ταυτόχρονα, με τον δεύτερο αν παραλείπεται να θεωρείται μηδέν.

Έτσι λοιπόν με την παρακάτω δήλωση, ορίζουμε στο αντικείμενο με id "ball" να υποστεί αρχικά μετατόπιση κατά τον οριζόντιο άξονα 30 pixels στα δεξιά (για αριστερά χρησιμοποιούμε αρνητικούς αριθμούς), στην συνέχεια να περιστραφεί 3 φορές και τέλος να μεγεθυνθεί στο διπλάσιο του πραγματικού του μεγέθους.

#ball { transform: translate(30px, 0) rotate(3turn) scale(2); }

transform-origin

Ως transform-origin ορίζεται το σημείο αναφοράς βάσει του οποίου θα γίνονται όλοι οι μετασχηματισμοί. Η αρχική του τιμή είναι το κέντρο του κάθε αντικειμένου (50% 50%) και μπορεί να πάρει τιμές ή ποσοστιαία ή με pixels ή με τα χαρακτηριστικά left, center, right και top, center, bottom για τους δύο άξονες αντίστοιχα.

Έτσι για το παράδειγμα στο demo που ακολουθεί με τους δείκτες του ρολογιού, κάθε δείκτης έχει μετατοπισμένο το σημείο αναφοράς του στο κάτω μέρος του, ώστε να περιστρέφεται γύρω από αυτό, που τυγχάνει να είναι και το κέντρο του ρολογιού.

#clock div { -webkit-transform-origin: 50% 100%; // η μετατόπιση του σημείου αναφοράς γίνεται μόνο στον κατακόρυφο άξονα για τους δείκτες }

Μόνοι τους οι δισδιάστατοι μετασχηματισμοί μπορεί να σας φάνηκαν απλοί. Η πραγματική μαγεία όμως είναι όταν συνδυάζονται μαζί με τα προηγούμενα modules που είχαμε παρουσιάσει, τα transitions και animations. Ελπίζω το παρακάτω demo (Safari 4 / mobile Safari friendly) να σας δώσει μια γεύση από τα 2D transforms μέχρι την επόμενη φορά που θα προχωρήσουμε στις τρεις διαστάσεις!

Πηγές

• Η επίσημη σελίδα του module
• Μερικά παραδείγματα από την ομάδα ανάπτυξης του Wekit
• Περισσότερα παραδείγματα που κάνουν χρήση και CSS transitions
• ...και μερικά παραδείγματα ακόμη για το τέλος