सीएसएस ट्रांसफॉर्म स्केल, बच्चे तत्व को स्केल न करें

Question

यदि मेरे पास कुछ बच्चे तत्वों के साथ div है और यह css स्केल किए जा रहा है। मैं एक बच्चे तत्व है जो मैं पैमाने पर करने के

#parent{ 
 
    -webkit-transform: scale(.5); 
 
} 
 
    
 
span:last-child{ 
 
    -webkit-transform: Something to ignore the parent scale; 
 
}

<div id="parent"> 
 
    <span>Child 1</span> 
 
    <span>Child 2</span> 
 
    <span>Child 3 (Don't Scale Me)</span> 
 
</div>

यह केवल सीएसएस के साथ किया जा सकता है नहीं करना चाहती है? एचटीएमएल बदलने या जेएस का उपयोग किए बिना।

Answer 1

दुर्भाग्य से यह संभव नहीं है।

आप मोटे तौर पर दो अन्य विकल्प हालांकि है:

1. स्केल सभी अन्य तत्व, एक आप पैमाने पर नहीं करना चाहते हैं (लेकिन इस कंटेनर पैमाने पर नहीं होगा) को छोड़कर।
2. कंटेनर स्केल करें और उस तत्व को दोबारा स्केल करें जिसे आप स्केल नहीं करना चाहते हैं (लेकिन यह शायद इसे धुंधला लगेगा)।

उदाहरण:

// Example 1. 
span:not(:last-child) { 
    display: inline-block; /* You can't scale inline elements */ 
    transform: scale(2); 
} 

// Example 2. 
#parent{ 
    transform: scale(.5); 
} 

span:last-child{ 
    transform: scale(2); 
} 

Answer 2

मुझे डर है कि आपको #parent > span:not(:last-child) जैसे अधिक विस्तृत चयनकर्ता का उपयोग करने की आवश्यकता है। Example।

Answer 3

सिर्फ एक ही वेबकिट संबंधित बग (क्रोम 44 में पाया) जो कि परिवर्तनों को ठीक से सेट नहीं कर रहे हैं अनुमति देता है। यदि आप ब्राउज़र-ज़ूमिंग के साथ सीएसएस-परिप्रेक्ष्य का उपयोग करते हैं, तो z-value को ब्राउज़र ज़ूम-कारक द्वारा गलत तरीके से स्केल किया जाता है। लेकिन यह बग बहुत दुर्लभ है।

Answer 4

धुंध के साथ समस्या को हल करने के लिए क्रोम के लिए hack मिला।

#parent { transform: scale(5);} 
#child { transform: scale(0.2) translate3d(0, 0, 0);}