तत्वों की ऊंचाई और चौड़ाई के आधार पर X और Y प्रतिशत मानों का अनुवाद करें?

Question

एक तत्व Y अक्ष 50% का अनुवाद करते हुए, इसे 50% अपनी स्वयं की ऊँचाई से नीचे ले जाएगा, 50% माता-पिता की ऊँचाई के रूप में नहीं, जैसा कि मुझे उम्मीद है। मैं मूल तत्व पर अनुवाद प्रतिशत को आधार बनाने के लिए एक अनुवाद करने वाला तत्व कैसे बताऊँ? या मैं कुछ समझ नहीं रहा हूँ?

http://jsfiddle.net/4wqEm/2/

Comments

ठीक है, ऐसा लगता है कि इसके आसपास कोई रास्ता नहीं है। प्रतिशत द्वारा सीएसएस अनुवाद उस तत्व का% लेता है जिसे स्थानांतरित करने के लिए दूरी का पता लगाने के लिए अनुवाद किया जा रहा है। यह आपके विशिष्ट सीएसएस घोषणा की तरह कार्य नहीं करता है जैसे शीर्ष, मार्जिन-टॉप, या पैडिंग-टॉप, जो सभी मूल कंटेनर पर आधारित हैं।

— एंड्रयू टिब्बेट्स

धन्यवाद, यह तुरंत मेरे लिए स्पष्ट नहीं था कि प्रतिशत का प्रतिशत कितना था।

— फिलिप वाल्टन

अगली बात जो आप जानते हैं, वे प्रतिशत को फॉन्ट-साइज़ का प्रतिशत भी बना देंगे! (ओह ...)

— केविन पेनो

Answer 1

अनुवाद में प्रतिशत का उपयोग करते समय, यह स्वयं की चौड़ाई या ऊंचाई को संदर्भित करता है। Https://davidwalsh.name/css-vertical-center ( डेमो ) पर एक नज़र डालें :

CSS परिवर्तनों के बारे में एक दिलचस्प बात यह है कि, प्रतिशत मूल्यों के साथ उन्हें लागू करते समय, वे उस तत्व के आयामों को आधार देते हैं, जिस पर वे कार्यान्वित किए जा रहे हैं, जैसे कि शीर्ष, दाएं, नीचे, बाएं, मार्जिन और गद्दी जैसे गुणों के विपरीत। , जो केवल माता-पिता के आयामों का उपयोग करते हैं (या पूर्ण स्थिति के मामले में, जो अपने निकटतम रिश्तेदार माता-पिता का उपयोग करता है)।

Comments

लेकिन एक एसवीजी को एनिमेट transform: translate(50%)करने में, मूल तत्व की चौड़ाई और ऊँचाई

— Atav32

Answer 2

आप व्यूपोर्ट के आकार के आधार पर अनुवाद करने के लिए vw और vh का उपयोग कर सकते हैं

@keyframes bubbleup {
  0% {
    transform: translateY(100vh);
  }

  100% {
    transform: translateY(0vh);
  }
}

Comments

यह मेरे लिए काम नहीं करता है ... vh ~ 40 पृष्ठ के नीचे की तरह है ?!

— अट्टुरसम

यह मेरा बुरा था ... तत्व एक पूर्ण तत्व के अंदर नहीं था ... :)

— AturSams

@AxeEffect यह स्वीकृत उत्तर नहीं होना चाहिए । यह व्यूपोर्ट के सापेक्ष है, मूल तत्व नहीं। क्या होगा यदि मूल तत्व व्यूपोर्ट का पूर्ण आकार नहीं है?

— trusktr

यदि आप स्केलिंग, ऑर्डर मामलों का उपयोग करते हैं तो @wolfdawn। इसलिए "स्केल (1.5) ट्रांसल्यू (40 वीडब्ल्यू)" मैं "ट्रांसली (40 वीडब्ल्यू) स्केल (1.5)" के समान नहीं हूं।

— कार्दाव

आपको पता होना चाहिए कि Apple और Google ने मोबाइल ब्राउज़र में vh यूनिट को तोड़ दिया है और इसलिए यह उस मामले में अविश्वसनीय है।

— केव

Answer 3

केवल CSS का उपयोग करके मेरे लिए क्या काम करता है:

.child {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* Backward compatibility */
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

यह काम किस प्रकार करता है:

• माता-पिता के समन्वय के अनुसार शीर्ष और बाएं पोजीशनिंग चाइल्ड विजेट। चाइल्ड विजेट का टॉप-लेफ्ट कॉर्नर बिल्कुल पेरेंट के केंद्र में दिखाई देगा (यह वह नहीं है जो हम इस समय चाहते हैं)।
• अनुवाद बाल विजेट -50% को शीर्ष पर ले जाएगा और इसके आकार (माता-पिता नहीं) के आधार पर छोड़ दिया जाएगा। इसका मतलब है, विजेट का केंद्र बिंदु ठीक उसी जगह ले जाया जाएगा जहां शीर्ष-बाएं बिंदु था - जिसे पहले एक माता-पिता के केंद्र के रूप में स्थापित किया गया था, और यही वह है जो हम चाहते हैं।

Answer 4

अनुवाद संपत्ति में प्रतिशत का उपयोग करने के लिए, आपको जावास्क्रिप्ट का उपयोग करना होगा: http://jsfiddle.net/4wqEm/27/

HTML कोड :

<div id="parent">
    <div id="children"></div>
</div>​​​​​​​​​​​​​

सीएसएस कोड:

#parent {
    width: 200px;
    height: 200px;
    background: #ff0;
}
#children {
    width: 10%;
    height: 10%;
    background: #f00;
}

जावास्क्रिप्ट कोड:

parent = document.getElementById('parent');
children = document.getElementById('children');

parent_height = parent.clientHeight;
​children_translate = parent_height * 50/100;
children.style.webkitTransform = "translateY("+children_translate+"px)";​​​​​​​​​​​​​​​​​​​​​​​​​​

मुझे आशा है कि मैं आपकी मदद कर सकता हूं और मुझे बता सकता है कि क्या आपको कोई अन्य समस्या है।

Comments

मैं इसे केवल CSS3 के साथ नहीं कर सकता?

— Drisris

यह मंदबुद्धि है (आपका उत्तर नहीं, सिर्फ तथ्य यह है कि कल्पना लेखक सीएसएस में ऐसा करने का तरीका नहीं बनाते हैं और हमें जेएस का उपयोग करना होगा)।

— त्रुक्त्र 19

Answer 5

आपका कथन बिल्कुल अनुवादित तत्व से आने वाले प्रतिशत के बारे में बिल्कुल सही है। अपने मामले में अनुवाद संपत्ति का उपयोग करने के बजाय, आपको पैरेंट डिव के सापेक्ष रहने के लिए पूर्ण स्थिति का उपयोग करना चाहिए। मैंने पूरी तरह से आपकी लाल div को यहाँ पोस्ट किया:

js fiddle pen यहाँ

 body {
    margin: 0;
    width: 100%;
    height: 100%;
    }
 body > div {
    width: 200px;
    height: 200px;
    background: #ff0;
    position: relative;
    }
 body > div > div {
    width: 10%;
    height: 10%;
    -webkit-transform: translateY(-50%);
    background: #f00;
    position: absolute;
    top: 50%;
    }

Comments

लेकिन शीर्ष और बाएँ एनिमेट करना त्वरित नहीं है, क्या यह है?

— trusktr 19

Answer 6

आप एक अतिरिक्त ब्लॉक का उपयोग कर सकते हैं और बच्चे के नोड को छोड़कर इसके लिए संक्रमण का उपयोग कर सकते हैं

HTML कोड :

<div id="parent">
    <div id="childrenWrapper">    
        <div id="children"></div>
    </div>
</div>​​​​​​​​​​​​​

सीएसएस कुछ इस तरह होना चाहिए

#parent {
    position: relative;
    width: 200px;
    height: 200px;
    background: #ff0;
}
#childrenWrapper{
    width: 100%;
    height: 100%;
}
#children {
    width: 10%;
    height: 10%;
    background: #f00;
}

Answer 7

आप तत्व को पूर्ण स्थिति में बना सकते हैं और पैतृक के रूप में प्रतिशत मान लेने के लिए बाईं और शीर्ष संपत्ति का उपयोग कर सकते हैं।

Answer 8

निम्न URL कार्यशील नमूने पर आवश्यक स्थिति के साथ इसका कांटा

body {
margin: 0;
width: 100%;
height: 100%;
}

body>div {
position: relative;
width: 200px;
height: 200px;
background: #ff0;
}

body>div>div {
position: absolute;
left: 50%;
top: 50%;
width: 10%;
height: 10%;
background: #f00;
transform: translate(-50%, -50%);
}

टिप्पणियाँ :

1. आप मूल तत्व को सापेक्ष में बदलकर अपने लाल वर्ग की पूर्ण स्थिति बना सकते हैं
2. फिर 50% शीर्ष और 50% बाईं ओर का उपयोग करके इसके ऊपरी बाएं कोने के अनुसार लाल वर्ग की स्थिति होगी
3. परिवर्तन का उपयोग करना: अनुवाद (-50%, - 50%) अपने केंद्र के अनुसार लाल वर्ग की स्थिति देगा

Answer 9

इस समस्या का हल अनुवाद का उपयोग करना नहीं है। जब आप किसी तत्व का अनुवाद कर रहे होते हैं, तो आपके द्वारा चयनित प्रतिशत उसकी खुद की ऊंचाई पर आधारित होता है।

यदि आप माता-पिता की ऊंचाई के आधार पर तत्व को स्थिति में लाना चाहते हैं, तो शीर्ष का उपयोग करें: 50%;

तो कोड इस तरह दिखेगा:

body {
    margin: 0;
    width: 100%;
    height: 100%;
}
body > div {
    width: 200px;
    height: 200px;
    background: #ff0;
    position: relative;
}
body > div > div {
    position: absolute;
    top: 50%;
    width: 10%;
    height: 10%;
/*     -webkit-transform: translateY(50%); */
    background: #f00;
}