Η perspective-originιδιότητα καθορίζει την προέλευση της perspectiveιδιότητας. Σκεφτείτε το ως το σημείο εξαφάνισης του τρέχοντος τρισδιάστατου χώρου.
Σημειώστε ότι για την perspectiveιδιότητα, perspective-originπρέπει να οριστεί στο γονικό στοιχείο για να δώσει το μετασχηματισμένο παιδί βάθος.
Η perspective-originιδιοκτησία δεν κάνει τίποτα από μόνη της. Πρέπει να οριστεί σε ένα στοιχείο μαζί με perspective.
/** * Syntax * perspective-origin: x-position * perspective-origin: x-position y-position * * perspective-origin:
| | constants | inherit */ .element1 ( perspective-origin: 25% 75%; ) .element2 ( perspective-origin: 10px 25px; ) .element3 ( perspective-origin: left bottom; ) Ακολουθεί μια επίδειξη που δείχνει πώς συμπεριφέρεται ένας τρισδιάστατος κύβος όταν αλλάζει το σημείο εξαφάνισής του αλλάζοντας την perspective-originτιμή (σταθερές).
Γεια, ας ζωντανεύσουμε την προοπτική προέλευση, μόνο για διασκέδαση!
- Ξεκινά από "0% 0%" (πάνω αριστερά)
- Μετά πηγαίνετε στο "100% 0%" (πάνω δεξιά)
- Στη συνέχεια στο "100% 100%" (κάτω δεξιά)
- Στη συνέχεια στο "0% 100%" (κάτω αριστερά)
- Στη συνέχεια, επιστρέψτε στο 1. και κάντε επανεκκίνηση
Υποστήριξη προγράμματος περιήγησης
Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.
Επιφάνεια εργασίας
| Χρώμιο | Firefox | ΙΕ | Ακρη | Σαφάρι |
|---|---|---|---|---|
| 12 * | 10 * | 11 | 12 | 4 * |
Κινητό / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 * | 3.2 * |