Οπίσθια ορατότητα - CSS-Κόλπα

Η backface-visibilityιδιότητα σχετίζεται με 3D μετασχηματισμούς. Με τρισδιάστατους μετασχηματισμούς, μπορείτε να περιστρέψετε ένα στοιχείο, ώστε αυτό που θεωρούμε ως «μπροστινό» ενός στοιχείου να μην βλέπει πλέον την οθόνη. Για παράδειγμα, αυτό θα αναστρέψει ένα στοιχείο μακριά από την οθόνη:

.flip ( transform: rotateY(180deg); )

Θα μοιάζει σαν να το πήρατε με μια σπάτουλα και το αναποδογυρίσατε σαν τηγανίτα. Αυτό συμβαίνει επειδή η προεπιλογή backface-visibilityείναι visible. Αντί να είναι ορατό, θα μπορούσατε να το κρύψετε.

.flip ( transform: rotateY(180deg); backface-visibility: hidden; )

Απλό παράδειγμα:

Δείτε το Pen FjwGA του Chris Coyier (@chriscoyier) στο CodePen.

Αυτό είναι χρήσιμο όταν κάνετε εφέ 3D. Για παράδειγμα:

Λειτουργεί σωστά

Μπροστά πίσω

Προβληματικό στο WebKit επειδή η οπίσθια προβολή δεν κρύβεται

Μπροστά πίσω

Αυτό δεν είναι προβληματικό στον Firefox για οποιονδήποτε λόγο, αν και η ιδιοκτησία λειτουργεί με τον ίδιο τρόπο.

Προθέματα

Υποστήριξη Firefox 10+ και IE 10+ backface-visibilityχωρίς πρόθεμα. Όλοι χρειάζονται Opera (post Blink, 15+), Chrome, Safari, iOS και Android -webkit-backface-visibility.

Αξίες

ορατό (προεπιλογή) - το στοιχείο θα είναι πάντα ορατό ακόμα και όταν δεν βλέπει στην οθόνη.
κρυφό - το στοιχείο δεν είναι ορατό όταν δεν βλέπει στην οθόνη.
κληρονομεί - η ιδιοκτησία θα πάρει την αξία της από το γονικό στοιχείο της.
αρχικό - ορίζει την ιδιότητα στην προεπιλεγμένη, δηλαδή visible.

Περισσότερες πληροφορίες

3D CSS Tester
Προδιαγραφές
Έγγραφα Mozilla

Υποστήριξη προγράμματος περιήγησης

Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.