बच्चों को रूपांतरण विरासत से बचाने से रोकता है css3

मेरे पास div है कि मैं ट्रैनफॉर्मिंग (स्केल और अनुवाद) कर रहा हूं, लेकिन div के अंदर मेरे पास div है। अब मैं यह देखना चाहता हूं कि आंतरिक div दूसरे शब्दों में अपने माता-पिता के परिवर्तन से प्रभावित नहीं है। मैं अपने माता-पिता की तरह स्केल करने के लिए आंतरिक div के लिए चाहूंगा।बच्चों को रूपांतरण विरासत से बचाने से रोकता है css3

<div id="rightsection"> 
    <div class="top"></div> 
    <div class="middle"> 
      <div class="large"> 
      <img src="assets/images/rightpanel_expanded.png" alt="map" title="map"/> 
      </div> 
    </div> 
    <div class="bottom"> 
     <p>Check if your friends are going!</p> 
    </div> 
</div>

यहाँ मेरी सीएसएस है:,

#rightsection:hover { 
    -moz-transform:scale(2.16,2.8) translate(-80px,-53px); 
    -webkit-transform:scale(2.16,2.8) translate(-80px,-53px); 
    -o-transform:scale(2.16,2.8) translate(-80px,-53px); 
    -ms-transform:scale(2.16,2.8) translate(-80px,-53px); 
    transform:scale(2.16,2.8) translate(-80px,-53px) 
}

तो समस्या यह है जब मैं पैमाने #rightsection, img को बढ़ाया जाता है, लेकिन मैं रखना चाहते हैं

यहाँ एचटीएमएल है छवि अपने मूल आकार पर।

किसी भी मदद की सराहना की है।

स्रोत

2011-08-12 vincent

शायद तुम बाहरी div से बाहर भीतरी div बढ़ना चाहिए था। – BoltClock

क्या आप अभी तक [jsFiddle] (http://jsfiddle.net) पर जो कुछ भी कर चुके हैं उसे फिर से बना सकते हैं? आपकी छवि http://dummyimage.com/ से हो सकती है। – thirtydot

मैंने इसे फिर से बनाया है, यह यहां पाया जा सकता है: jsfiddle.net/ecbVH। जैसा कि आप देख सकते हैं कि छवि 578x329 होनी चाहिए लेकिन यह बहुत बड़ा है, परिणाम – vincent

सामान्य रूप से करें। सभी बच्चों को "ट्रांसफॉर्म: कोई नहीं" सेट करें।

.children1, 
.children2, 
.childrenN { 
    -moz-transform: none; 
    -webkit-transform: none; 
    -o-transform: none; 
    -ms-transform: none; 
    transform: none; 
}

स्रोत

2011-08-12 21:49:40 Webars

देखने के लिए तत्व पर होवर करें जो ट्रांसफॉर्म के घोंसले को रोकता है, है ना? – BoltClock

हां, आप सही हैं। – Webars

यह कैसे काम करना चाहिए? मैं इसे पूर्ण या सापेक्ष-स्थित बच्चों पर पुन: उत्पन्न नहीं कर सकता। http://jsfiddle.net/NPC42/XSHmJ/ – NPC

यहाँ यह क्या मेरे लिए काम किया है ..

मैं बच्चों के लिए विपरीत संक्रमण का इस्तेमाल किया। तो फिर यह स्थिर

.logo { 
    background: url('../images/logo-background.png') no-repeat; 
    width: 126px; 
    height: 127px; 
    margin-top:-24px; 
    z-index: 10; 
    display: block; 

} 
a.logo span{ 
    display: block; 
    width: 126px; 
    height: 127px; 
    background: url('../images/logo-bismi.png') no-repeat; 
    z-index: 20; 
    text-indent: -9999px; 
    text-transform: capitalize; 
    -webkit-transition: -webkit-transform 0.4s ease-out; 
    -moz-transition: -moz-transform 0.4s ease-out; 
    transition: transform 0.4s ease-out;  

} 
a.logo:hover span{ 
    -webkit-transform: rotateZ(-360deg); 
    -moz-transform: rotateZ(-360deg); 
    transform: rotateZ(-360deg); 
} 
a.logo { 
    -webkit-transition: -webkit-transform 0.4s ease-out; 
    -moz-transition: -moz-transform 0.4s ease-out; 
    transition: transform 0.4s ease-out;   
} 
a.logo:hover{ 
    -webkit-transform: rotateZ(360deg); 
    -moz-transform: rotateZ(360deg); 
    transform: rotateZ(360deg); 
}

स्रोत

2013-03-23 15:42:47

.parent { 
 
    position: relative; 
 
    background-color: yellow; 
 
    width: 200px; 
 
    height: 150px; 
 
    margin: 70px; 
 
    -webkit-transform: rotate(30deg); 
 
    -moz-transform: rotate(30deg); 
 
    -o-transform: rotate(30deg); 
 
    -ms-transform: rotate(30deg); 
 
    transform: rotate(30deg); 
 
} 
 

 
.child { 
 
    position: absolute; 
 
    top: 30px; 
 
    left: 50px; 
 
    background-color: green; 
 
    width: 70px; 
 
    height: 50px; 
 
    -webkit-transform: rotate(-30deg); 
 
    -moz-transform: rotate(-30deg); 
 
    -o-transform: rotate(-30deg); 
 
    -ms-transform: rotate(-30deg); 
 
    transform: rotate(-30deg); 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

स्रोत

2015-04-10 10:46:59

वह विरासत को रोक नहीं रहा है, यह सिर्फ दोहरे नकारात्मक के साथ इसे पूर्ववत कर रहा है। – JackHasaKeyboard

बच्चों को रूपांतरण विरासत से बचाने से रोकता है css3

उत्तर

संबंधित मुद्दे