परिवर्तन-शैली - सीएसएस-ट्रिक्स

transform-styleसंपत्ति, जब एक तत्व के लिए आवेदन किया, निर्धारित करता है कि उस तत्व के बच्चों के लिए 3 डी अंतरिक्ष में तैनात कर रहे हैं, या चपटा।

.parent ( transform-style: preserve-3d; )

यह दो में से एक मान को स्वीकार करता है: flat(डिफ़ॉल्ट) और preserve-3d। दो मानों के बीच के अंतर को प्रदर्शित करने के लिए, नीचे दिए गए कोड में टॉगल बटन पर क्लिक करें:

इस पेन को देखें!

जब बटन पर क्लिक किया जाता है, तो डेमो transform-styleबीच preserve-3d- बीच में मान को टॉगल करने के लिए जावास्क्रिप्ट का उपयोग करता है flat।

जैसा कि आप देख सकते हैं, जब मूल्य को बदल दिया जाता है flat, तो बाल तत्व अब translateZमानों के अनुसार (3 डी स्पेस में) ढेर नहीं किए जाते हैं , बल्कि एचटीएमएल पेज पर डिफ़ॉल्ट रूप से तत्वों को प्रदर्शित करने के लिए बाहर समतल करते हैं।

ब्राउज़र का समर्थन

क्रोम	सफारी	फ़ायर्फ़ॉक्स	ओपेरा	अर्थात	एंड्रॉयड	आईओएस
12+	4+	10+	15+	कोई नहीं	3.0+ है	३.२+

फ़ायरफ़ॉक्स 16+ को छोड़कर सभी ब्राउज़रों को विक्रेता उपसर्गों की आवश्यकता होती है। ओपेरा -webkit-15 संस्करण और ब्लिंक रूपांतरण के रूप में उपयोग करता है ।

IE10 3D परिवर्तनों का समर्थन करता है, लेकिन transform-styleसंपत्ति का समर्थन नहीं करता है।