css3.gr

Καιρός για το τελευταίο (και ίσως το πιο ενδιαφέρον) κομμάτι του οδηγού για τα νέα CSS 3 modules. Σε αυτό τον οδηγό θα περιγράψουμε σε γενικές γραμμές τους τρισδιάστατους μετασχηματισμούς που εισάγει η CSS 3 και έχουν γίνει το αντικείμενο προσοχής τελευταία.

Αν και τα 3D transforms υποστηρίζονται (στην παρούσα φάση) μόνο από το mobile Safari, πρόσφατα -και μετά από κάποια φανταστικά demos- οι τρισδιάστατοι μετασχηματισμοί με CSS 3 είδαν το φως της δημοσιότητας, κυρίως με την υλοποίηση τους στις τελευταίες nightly build εκδόσεις του Webkit (με λίγα λόγια, θα τα δούμε στο Safari σύντομα).

Πριν προχωρήσω σε ορισμούς και ιδιότητες, θα σας συμβούλευα καταρχάς να ρίξετε μια ματιά στα προηγούμενα άρθρα που ασχολούνται με τα transitions, animations και 2D transforms, ώστε να υπάρχει μια ομαλή μετάβαση για αυτό που θα ακολουθήσει. Να σημειώσω πως στον τρισδιάστατο χώρο, εισάγεται η έννοια ενός τρίτου άξονα (z) ο οποίος υφίσταται ‘νοητά’ ως ένας κάθετος άξονας στο επίπεδο της οθόνης, με τις θετικές τιμές του να είναι προς τον χρήστη και οι αρνητικές από την αντίθετη κατεύθυνση.

Επίσης καλό θα ήταν να παρακολουθήσετε κάποια demos από CSS 3 3D transformations (είναι live, είτε μέσω video), όπως το Coverflow, το Snow Stack και κάποια παραδείγματα του Webkit group.

Ας ξεκινήσουμε λοιπόν με τα 3D transformations.

transform

Γνώριμη ιδιότητα από τους δισδιάστατους μετασχηματισμούς, το transform property χρησιμοποιείται για να μετασχηματιστεί ένα αντικείμενο τόσο στις δύο όσο και στις τρείς διαστάσεις. Η αρχική τιμή του transform είναι ‘none’ και μπορεί (για τον 3D χώρο) να πάρει τις παρακάτω συναρτήσεις ως ορίσματα.

Καταρχάς υποστηρίζονται όλες οι συναρτήσεις που είχαν παρουσιαστεί στα 2d transforms, οπότε δεν θα τις επαναλάβουμε. Εκτός από αυτές υπάρχουν και οι παρακάτω:

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

Αντίστοιχη της συνάρτησης matrix αλλά για τις τρεις διαστάσεις (4x4 πίνακας).

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

Αντίστοιχη της συνάρτησης translate αλλά για τον 3D χώρο με x, y και z τις τιμές για τους αντίστοιχους άξονες

translateZ(<τιμή>)

Μετακίνηση του αντικειμένου στον Z άξονα (τιμές % δεν επιτρέπονται)

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

Αντίστοιχη της συνάρτησης scale για τις τρεις διαστάσεις

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

Μεγέθυνση (ή σμίκρυνση) του αντικειμένου βάσει του άξονα z

rotate3d(<αριθμός>, <αριθμός>, <αριθμός>, <γωνία>)

Αντίστοιχη της συνάρτησης rotate, η rotate3d περιστρέφει το αντικείμενο βάσει μιας γωνίας, σχετικά με το διάνυσμα(sorry για τα μαθηματικά) που ορίζεται από τις τρεις πρώτες τιμές.

rotateX(<γωνία>)

Περιστροφή του αντικειμένου γύρω από τον άξονα x

rotateY(<γωνία>)

Περιστροφή του αντικειμένου γύρω από τον άξονα y

rotateZ(<γωνία>)

Περιστροφή του αντικειμένου γύρω από τον άξονα z

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

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

transform-origin

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

transform-style

Η transform-style ορίζει πως τα παιδιά του αντικειμένου στο οποίο εφαρμόζεται, θα αναπαρασταθούν στον τρισδιάστατο χώρο. Η ιδιότητα παίρνει δύο τιμές: flat και preserve3d. Με την πρώτη τιμή, όλα τα παιδιά του αντικειμένου ζωγραφίζονται ως επίπεδα πάνω στο επίπεδο του αντικειμένου-πατέρα. Με την τιμή preserve3d τα παιδιά συγκρατούν τις θέσεις τους στον 3D χώρο. Η ιδιότητα transform-style θα πρέπει να χρησιμοποιείται σωστά σε όσα parent elements των οποίων τα παιδιά θέλουμε να αναπαραστήσουμε στις τρεις διαστάσεις, καθώς η αρχική τιμή του transform-style property είναι flat.

perspective

Η ιδιότητα perspective κάνει ακριβώς ότι και η perspective συνάρτηση της transform παραπάνω, με την διαφορά ότι εφαρμόζει τους μετασχηματισμούς στα παιδιά του αντικειμένου στο οποίο ορίζεται και όχι στο ίδιο.

perspective-origin

Η perspective-origin θυμίζει αρκετά την transform-origin, καθώς ορίζει το σημείο αναφοράς της πυραμίδας της προοπτικής προβολής (με αρχικές τιμές 50% 50%), δηλαδή το σημείο στο οποίο ‘κοιτάει’ ο χρήστης.

backface-visibility

Η τελευταία ιδιότητα ‘backface-visibility’ ορίζει αν θα φαίνεται η όχι η ‘πίσω’ πλευρά του αντικειμένου (μιας και μιλάμε για τις τρεις διαστάσεις). Έτσι λοιπόν σε περίπτωση που το αντικείμενο περιστραφεί 180 μοίρες κατά τον άξονα y, αν θα φαίνεται η όχι η πίσω πλευρά του. Κάτι τέτοιο γίνεται δυνατό με την χρήση των δύο τιμών ‘visible’ ή ‘hidden’ με αρχική τιμή την ‘visible’.

Επίλογος

Μπορεί οι ιδιότητες των τρισδιάστατων μετασχηματισμών να φαίνονται λίγες, παρόλα αυτά αν συνδυαστούν με τις αντίστοιχες ιδιότητες των υπόλοιπων CSS 3 modules που παρουσιάστηκαν (αλλά και γενικότερα με όλα τα γνωστά CSS properties), τα αποτελέσματα μπορεί να είναι εντυπωσιακά. Πιστεύω πως αν τα modules που παρουσιάστηκαν σε αυτό τον οδηγό, χρησιμοποιηθούν σωστά τόσο μόνο μέσω CSS όσο και μέσω Javascript, δίνονται πολλές περισσότερες δυνατότητες στα χέρια των designers.

Το μόνο μειονέκτημα είναι πως σύμφωνα με το roadmap, τα συγκεκριμένα modules δεν έχουν την υψηλότερη προτεραιότητα, που σημαίνει πως θα περάσει κάποιος καιρός ώστε να τα δούμε να υποστηρίζονται πλήρως από όλους τους browsers. 

Το παρακάτω demo παρουσιάζει κάποιες από τις παραπάνω ιδιότητες και για να μπορείτε να το δείτε να λειτουργεί, πρέπει να χρησιμοποιήσετε mobile Safari (να μπείτε δηλαδή από το iPhone ή να χρησιμοποιήσετε τον iPhone simulator) ή την τελευταία nightly του Webkit (αν και δυστυχώς λόγω μη πλήρης υποστήριξης, θα σας συμβούλευα να το δείτε μέσω μιας nightly έκδοσης του Webkit).

Πηγές

• Η επίσημη σελίδα του module
• Μερικά παραδείγματα από την ομάδα ανάπτυξης του Wekit