रूपांतर-उत्पत्ति - सीएसएस-ट्रिक्स

transform-originसंपत्ति सीएसएस रूपांतरण के साथ संयोजन के रूप में प्रयोग किया जाता है, जिससे आप एक को बदलने के उद्गम स्थल बदल जाते हैं।

.box ( transform: rotate(360deg); transform-origin: top left; )

जैसा कि ऊपर संकेत किया गया है, transform-originसंपत्ति 2 डी ट्रांसफ़ॉर्म के लिए दो-अलग-अलग-अलग कीवर्ड या लंबाई मान ले सकती है और 3 डी ट्रांसफ़ॉर्म के लिए तीन मान हो सकती है।

एक क्लिक इवेंट का उपयोग करके एक ट्रांस्फ़ॉर्म किए गए ट्रांसफ़ॉर्म के साथ 200px बॉक्स पर 200x के ऊपर कोड का उपयोग करना, इस तरह से व्यवहार करेगा:

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

डिफ़ॉल्ट रूप से, एक परिवर्तन की उत्पत्ति "50% 50%" है, जो कि किसी भी दिए गए तत्व के केंद्र में है। मूल को "शीर्ष बाएं" में बदलना (जैसा कि ऊपर डेमो में है) तत्व को रोटेशन बिंदु के रूप में तत्व के शीर्ष बाएं कोने का उपयोग करने का कारण बनता है।

मान लंबाई, प्रतिशत या कीवर्ड हो सकता है top, left, right, bottom, और center।

पहला मान क्षैतिज स्थिति है, दूसरा मान ऊर्ध्वाधर है, और तीसरा मान Z अक्ष पर स्थिति का प्रतिनिधित्व करता है। तीसरा मान केवल तभी काम करेगा जब आप 3D ट्रांसफ़ॉर्म का उपयोग कर रहे हैं, और यह प्रतिशत नहीं हो सकता।

कोडपेन पर शॉ (@ शशव) द्वारा पेन ट्रांसफॉर्म-मूल चित्रण देखें।