Η perspectiveιδιότητα CSS δίνει σε ένα στοιχείο έναν 3D χώρο επηρεάζοντας την απόσταση μεταξύ του επιπέδου Z και του χρήστη.
Η ισχύς του αποτελέσματος καθορίζεται από την τιμή. Όσο μικρότερη είναι η τιμή, τόσο πιο κοντά θα φτάσετε από το επίπεδο Z και τόσο πιο εντυπωσιακό είναι το οπτικό εφέ. Όσο μεγαλύτερη είναι η τιμή, τόσο πιο λεπτό θα είναι το αποτέλεσμα.
Σημαντικό: Λάβετε υπόψη ότι η προοπτική ιδιότητα δεν επηρεάζει τον τρόπο απόδοσης του στοιχείου. απλώς ενεργοποιεί στοιχεία τρισδιάστατου χώρου για παιδιά. Αυτή είναι η κύρια διαφορά μεταξύ της transform: perspective()λειτουργίας και της perspectiveιδιότητας. Το πρώτο δίνει βάθος στοιχείου, ενώ το τελευταίο δημιουργεί έναν χώρο 3D που μοιράζεται όλα τα μεταμορφωμένα παιδιά του.
/** * Syntax * perspective: none | */ .parent ( perspective: 1000px; ) .child ( transform: rotateY(50deg); ) Η παραπάνω επίδειξη στοχεύει να δείξει τη διαφορά μεταξύ της λειτουργίας και της ιδιότητας.
- Στην αριστερή πλευρά, μπορείτε να δείτε την ιδιότητα που εφαρμόζεται στο γονικό (
perspective: 50em) των μετασχηματισμένων στοιχείων (transform: rotateY(50deg)). - Στη δεξιά πλευρά, η προοπτική εφαρμόζεται από τον μετασχηματισμό απευθείας στα παιδιά (
transform: perspective(50em) rotateY(50deg)).
Αυτό δείχνει πώς η ρύθμιση της προοπτικής για τον γονέα κάνει όλα τα παιδιά να μοιράζονται τον ίδιο χώρο 3D και έτσι το ίδιο σημείο εξαφάνισης.
Ας δοκιμάσουμε κάτι ακόμα πιο δροσερό: έναν κύβο με 3D μετασχηματισμούς και προοπτική.
Εδώ είναι πώς κατασκευάζεται ο κύβος: βασίζεται σε δύο ένθετα περιτυλίγματα (ένα για να δώσει την προοπτική του κύβου και ένα για να τυλίξει όλες τις πλευρές) και 6 στοιχεία για να φτιάξουν τις πλευρές. Σε κάθε στοιχείο δίνεται το δικό του μετασχηματιστικό μείγμα που μεταφράζει και περιστρέφεται στον 3D-χώρο (π.χ. transform: rotateX(90deg) translateZ(1em)).
Ας τελειώσουμε με μια επίδειξη που θα μπορούσε να είναι η βάση ενός πραγματικού κόσμου: ένας τοίχος φωτογραφιών + λεζάντες χρησιμοποιώντας προοπτική και μετασχηματισμό.
Όταν αιωρείται πάνω από τον τοίχο, τα παιδιά περιστρέφονται πίσω στην κανονική τους θέση, ακυρώνοντας το αποτέλεσμα.
Σπουδαίος! Η χρήση προοπτικής (με τιμή διαφορετική από 0 ή καμία) δημιουργεί ένα νέο περιβάλλον στοίβαξης.
Υποστήριξη προγράμματος περιήγησης
| Χρώμιο | Σαφάρι | Firefox | ΛΥΡΙΚΗ ΣΚΗΝΗ | ΙΕ | Android | iOS |
|---|---|---|---|---|---|---|
| 12+ | Οποιος | 10+ | Κανένας | 10+ | 3+ | Οποιος |
Ο Firefox 10-15 χρειάζεται -moz-, τα προγράμματα περιήγησης WebKit μπορεί να χρειάζονται -webkit-