CSS3 ट्रांसफॉर्म: एकाधिक उत्पत्ति?

Question

स्केलिंग के लिए ऊपरी बाएं (0%, 0%) पर एक मूल निर्दिष्ट करना और CSS3 में घूर्णन के लिए एक अलग मूल (केंद्र) निर्दिष्ट करना संभव है? मैं केवल वेबकिट के साथ काम कर रहा हूं, अगर इससे मदद मिलती है।

मैं वर्तमान में एक को बदलने सूची का उपयोग कर रहा (यानी -webkit-परिणत: पैमाने (newScale) घुमाएं (newRotate)

लेकिन ऐसा लगता है जैसे कि यह संभव गुजरता के बीच मूल बदलने के लिए नहीं है वहाँ। इसे देखने का एक बेहतर तरीका? वर्तमान में, यदि मैं किसी ऑब्जेक्ट को स्केल करता हूं और इसे डिफ़ॉल्ट केंद्र पर मूल के साथ घुमाता हूं, तो तत्व की स्थिति अब बंद हो जाती है और इसलिए जब आप तत्व खींचते हैं, तो कर्सर अभी भी शीर्ष बाईं ओर है तत्व के, जबकि यह केंद्र में होना चाहिए। इसे मापने के लिए केंद्र में मूल को बदलना, यह घूर्णन और फ़्लिपिंग के साथ नई समस्याओं को प्रस्तुत करता है।

Answer 1

मिले समस्या के लिए एक अच्छा समाधान ... एक माता पिता/बच्चे संबंध बनाने के रूप में निम्नानुसार द्वारा:

<div class="container"> 
    <img src="" /> 
</div> 

मैं अब सेटअप दो वर्गों इस प्रकार है:

.container { 
    -webkit-transform-origin: 0% 0%; 
    -webkit-transform: scale(0.5); 
} 

.container img { 
    -webkit-transform-origin: 50% 50%; 
    -webkit-transform: rotate(45deg); 
} 

यह करना होगा वही जो मैं चाहता हूं: ऊपरी बाईं ओर एक उत्पत्ति के साथ स्केल करें, फिर केंद्र में मूल के साथ घुमाएं। देखा!

Answer 2

इसके बारे में क्या: http://jsfiddle.net/22Byh/1/

Answer 3

इसके बजाय मूल केंद्र के साथ स्केलिंग + अनुवाद के रूप में मूल (0,0) के साथ स्केलिंग के बारे में सोचें। अलगाव में निम्नलिखित:

-webkit-transform-origin: top left; 
-webkit-transform: scale(1.5); 

रूप में ही है:

-webkit-transform-origin: center; 
-webkit-transform: scale(1.5) translate3d(16.66%, 16.66%, 0); 

सिद्धांत रूप में रोटेशन मूल केंद्र कोनों sqrt(1/2)-0.5 से बाहर चिपके हुए नीचे और सही 20.71% द्वारा मूल स्थानांतरित करने के लिए हमें की आवश्यकता होती है छोड़ देना चाहिए, लेकिन किसी कारण से वेबकिट ट्रांसफॉर्म एल्गोरिदम हमारे लिए चीजों को नीचे ले जाता है (लेकिन पर्याप्त नहीं है) और हमारे लिए उत्पत्ति को स्केल करता है (फिर से काफी नहीं)। इस प्रकार हम इस अजीब व्यवहार के लिए 50% द्वारा सही कदम और कुछ समायोजन करने की जरूरत है:

-webkit-transform-origin: center; 
-webkit-transform: scale(1.5) rotate(45deg) translate3d(52.5%, 0.5%, 0); 
-webkit-transition: all 2s ease-in; 

नोट: अपने मूल जवाब width:100px; और height100px; जो एक translate3d(54px, 0, 0) की आवश्यकता के साथ एक div उपयोग कर रहा था।