सीएसएस

Question

का उपयोग करके बस ऊपर और बाईं ओर के बजाय मध्य से div का विस्तार करें, मुझे यकीन नहीं है कि यह संभव है, लेकिन मैंने सोचा कि यह सीएसएस ट्रांसफॉर्म का उपयोग करके अच्छा होगा, जहां एक div अपने केंद्र से पूर्व निर्धारित तक फैलता है ऊपरी बाएं कोने से बस ऊंचाई और चौड़ाई।

उदाहरण के लिए, अगर मेरे पास है (demo)

<div id="square"></div> 

और

#square { 
    width: 10px; 
    height: 10px; 
    background: blue; 
    transition: width 1s, height 1s; 
} 
#square:hover { 
    width: 100px; 
    height: 100px; 
} 

मंडराना पर, यह सही करने के लिए और करने के लिए नीचे वर्ग का विस्तार होगा (विक्रेता उपसर्गों संक्षिप्तता के लिए बाहर छोड़ दिया) 100px। मैं इसे बीच से विस्तार करना चाहता हूं।

मुझे पता है कि मैं शायद इस्तेमाल कर सकते हैं transform: scale(x) (demo) हूँ, लेकिन यह वास्तव में एक बहुत ही "पिक्सेल सही" लेआउट के साथ मुझे प्रदान नहीं करता है (के रूप में यह प्रतिशत-आधारित है), और यह भी प्रभावित नहीं करता है आसपास के लेआउट (दस्तावेज़ तत्वों में मौजूद अन्य तत्वों को इसके आकार बदलने के लिए समायोजित करें)। यह अनिवार्य रूप से मैं करना चाहता हूं, इसके अनुसार दस्तावेज़ प्रवाह के अनुसार प्रभावित किया गया है।

क्या किसी को जावास्क्रिप्ट के बिना यह करने का कोई तरीका पता है?

Answer 1

कुंजी सूत्र द्वारा मार्जिन को स्थानांतरित करने की कुंजी है। एक छोटा "wiggle" है जो संक्रमण के दौरान परेशान है अगर यह तैरता है।

संपादित जोड़ना विकल्प

विकल्प 1:

#square { 
    width: 10px; 
    height: 10px; 
    margin: 100px; /*for centering purposes*/ 
    background: blue; 
    -webkit-transition: width 1s, height 1s, margin 1s; 
    -moz-transition: width 1s, height 1s, margin 1s; 
    -ms-transition: width 1s, height 1s, margin 1s; 
    transition: width 1s, height 1s, margin 1s; 
} 
#square:hover { 
    width: 100px; 
    height: 100px; 
    margin: 55px; /* inital margin - ((intial margin - width (or height))/2) */ 
} 

विकल्प 2: अंतरिक्ष इसके चारों ओर सुरक्षित http://jsfiddle.net/xcWge/14/ भीतर का विस्तार यह http://jsfiddle.net/xcWge/18/ चारों ओर तत्वों से अधिक का विस्तार:

#square { 
    width: 10px; 
    height: 10px; 
    margin: 0; /*for centering purposes*/ 
    background: blue; 
    -webkit-transition: width 1s, height 1s, margin 1s; 
    -moz-transition: width 1s, height 1s, margin 1s; 
    -ms-transition: width 1s, height 1s, margin 1s; 
    transition: width 1s, height 1s, margin 1s; 
} 
#square:hover { 
    width: 110px; 
    height: 110px; 
    margin: -50px; /* inital margin - ((intial margin - width (or height))/2) */ 
} 

विकल्प 3: प्रवाह में यह पहले तत्वों से अधिक का विस्तार और इसके बाद http://jsfiddle.net/xcWge/22/ तत्वों बदलाव:

#square { 
    width: 10px; 
    height: 10px; 
    margin: 0; 
    position: relative; 
    top: 0; 
    left: 0; 
    background: blue; 
    -webkit-transition: width 1s, height 1s, top 1s, left 1s, margin 1s; 
    -moz-transition: width 1s, height 1s, top 1s, left 1s, margin 1s; 
    -ms-transition: width 1s, height 1s, top 1s, left 1s, margin 1s ; 
    transition: width 1s, height 1s, top 1s, left 1s, margin 1s; 
} 
#square:hover { 
    width: 110px; 
    height: 110px; 
    top: -50px; /* inital top- (intial top-height)/2) */ 
    left: -50px; /* inital left- (intial left-width)/2) */ 
    margin-right: -50px; 
    margin-bottom: -50px; 
} 

Answer 2

आपको इसे करने के लिए इसे अपनी स्थिति को भी बदलना होगा, इसे सापेक्ष/पूर्ण पर सेट करना होगा और top मान को एनिमेट करने के रूप में बदलना होगा।

(संपादित करें टिप्पणी के आधार पर)

पूर्ण स्थिति के बजाय

, तो आप एक नकारात्मक शीर्ष मार्जिन के साथ बात की इसी तरह करने की कोशिश कर सकता है। यह दस्तावेज़ प्रवाह में रखेगा। किसी भी तरह, हालांकि, आपको वास्तव में div को स्थानांतरित करने और ऊंचाई/चौड़ाई को एनिमेट करने की आवश्यकता है।

Answer 3

मैं होवर पर शीर्ष और बाएं संरेखण को समायोजित करके ऐसा करता हूं। पूर्व: मैं चौड़ाई में 50 पीएक्स जोड़ूंगा और इसे 25px छोड़ दूंगा ताकि इसे मध्य से फैलाने के सभी प्रभावों को पूरा किया जा सके।

Answer 4

आपको शायद div स्थिति पूर्ण करनी होगी और फिर होवर पर बाएं और शीर्ष स्थिति को समायोजित करना होगा। jsFiddle example