सीएसएस स्केल ट्रांसफॉर्म कैसे दस्तावेज़ प्रवाह को प्रभावित करता है?

Question

मैं वास्तव में उलझन में हूं कि सीएसएस ट्रांसफॉर्म का उपयोग करके तत्व को स्केल करने से दस्तावेज़ प्रवाह प्रभावित होता है।

Consider this jsbin या this codepen since jsbin seems to have gone down जहाँ मैं स्टाइलशीट

#scaled-contents { 
    height: 400px; 
    width: 400px; 
    background-color: blue; 
    color: red; 
    font-size: 3em; 
} 

#scaled { 
    transform: scale(0.25, 0.25); //browser prefixes... 
    width: 100px; 
    height: 100px 
} 

मैं इस एक भी 100x100 नीले वर्ग के लिए इसी तरह दिखाने के लिए उम्मीद करेंगे के साथ

p{slipsum text} 
#scaled 
    #scaled-content{some text} 
p{slipsum text} 

है। लेकिन इसे स्थानांतरित किया गया है और क्रोम पर भी निम्न पी तत्व को थोड़ा ओवरलैप करता है। इसके अलावा, devtools में #scaled के आयामों की जांच squat और लंबे के रूप में दिखाता है, प्रतीत होता है कि यह 100x100 बॉक्स से परे तोड़ रहा है।

अंत में, overflow: hidden; को #scaled में जोड़कर कुछ पागल हो जाता है।

क्या चल रहा है? सामग्री प्रवाह को कैसे प्रभावित किया जाना चाहिए?

Answer 1

सीएसएस ट्रांसफॉर्म दस्तावेज़ प्रवाह को प्रभावित नहीं करता है। डीओएम तत्व पृष्ठ प्रवाह के भीतर इसकी मूल स्थिति और आयामों पर कब्जा करेगा।

तो यदि आपके पास समान आकार के 3 वर्ग div है, तो पंक्ति में इनलाइन प्रदर्शित की गई है और एक -webkit-transform: पैमाने (2) को केंद्रीय वर्ग में लागू करें, यह वर्ग 200% बड़ा, पैमाने से स्केल करेगा इसकी मूल स्थिति का केंद्र, और दोनों अन्य वर्गों को ओवरलैप करें।

संदर्भ उदाहरण:

http://jsfiddle.net/ypnEk/

HTML:

<div class="square one"></div> 
<div class="square two"></div> 
<div class="square three"></div> 

सीएसएस:

.square{ 
    margin-top:50px; 
    width:50px; 
    height:50px; 
    display:inline-block; 
} 

.one{ 
    background:#222; 
} 

.two{ 
    background:#888; 
    -webkit-transform: scale(2); 
} 

.three{ 
    background:#ccc; 
}