Η transform-styleιδιότητα, όταν εφαρμόζεται σε ένα στοιχείο, καθορίζει εάν τα παιδιά αυτού του στοιχείου είναι τοποθετημένα σε τρισδιάστατο χώρο ή ισοπεδωμένα.
.parent ( transform-style: preserve-3d; )Δέχεται μία από τις δύο τιμές: flat(η προεπιλογή) και preserve-3d. Για να δείξετε τη διαφορά μεταξύ των δύο τιμών, κάντε κλικ στο κουμπί εναλλαγής στο CodePen παρακάτω:
Όταν κάνετε κλικ στο κουμπί, η επίδειξη χρησιμοποιεί JavaScript για εναλλαγή της transform-styleτιμής μεταξύ preserve-3dκαι flat.
Όπως μπορείτε να δείτε, όταν η τιμή αλλάξει σε flat, τα θυγατρικά στοιχεία δεν συσσωρεύονται πλέον σύμφωνα με τις translateZτιμές (σε χώρο 3D), αλλά αντίθετα ισοπεδώνονται για να εμφανίζονται με τον τρόπο που τα στοιχεία είναι από προεπιλογή σε μια σελίδα HTML.
Υποστήριξη προγράμματος περιήγησης
| Χρώμιο | Σαφάρι | Firefox | ΛΥΡΙΚΗ ΣΚΗΝΗ | ΙΕ | Android | iOS |
|---|---|---|---|---|---|---|
| 12+ | 4+ | 10+ | 15+ | Κανένας | 3.0+ | 3.2+ |
Όλα τα προγράμματα περιήγησης απαιτούν προθέματα προμηθευτή, εκτός του Firefox 16+. Το Opera χρησιμοποιεί -webkit-από την έκδοση 15 και τη μετατροπή Blink.
Το IE10 υποστηρίζει μετασχηματισμούς 3D, αλλά δεν υποστηρίζει την transform-styleιδιότητα.