css3 ट्रांसफॉर्म-उत्पत्ति का केंद्र और ज़ूम

का उपयोग करें मेरे पास मेरे पृष्ठ पर divs की एक श्रृंखला है। प्रत्येक div में पृष्ठभूमि छवि होती है और इसे ग्रिड गठन में व्यवस्थित किया जाता है। मेरे पृष्ठ पर divs की एक अनियंत्रित संख्या है। पृष्ठ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">css3 ट्रांसफॉर्म-उत्पत्ति का केंद्र और ज़ूम

का उपयोग कर आकार में बाध्य है, मैं एक div पर क्लिक करने में सक्षम होना चाहता हूं, इसे एक विशिष्ट पैमाने पर स्केल कर सकता हूं, और केंद्र।

मेरे मार्कअप:

<body id="body"> 
    <div id="container" style="position: relative"> 
     <div id="pack1" class="screenItem cardPack"></div> 
     <div id="pack2" class="screenItem cardPack"></div> 
     <div id="pack3" class="screenItem cardPack"></div> 
     <div id="pack4" class="screenItem cardPack"></div> 
    </div> 
</body>

मेरी सीएसएस:

#pack1{ 
    margin-left: 20px; 
    margin-top: 20px; 
    height: 193px; 
    width: 127px; 
    background-image: url(../images/image1.png); 
    background-size: 100% 100%; 
    float: left; 
    clear: both; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    -ms-transition: all 1s ease-in-out;  
    transition: all 1s ease-in-out; 
} 

#pack2{ 
    margin-right: 20px; 
    margin-top: 20px; 
    height: 193px; 
    width: 127px; 
    background-image: url(../images/image2.png); 
    background-size: 100% 100%; 
    float: right; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    -ms-transition: all 1s ease-in-out;  
    transition: all 1s ease-in-out; 
} 

#pack3{ 
    margin-left: 20px; 
    margin-top: 20px; 
    height: 193px; 
    width: 127px; 
    background-image: url(../images/image3.png); 
    background-size: 100% 100%; 
    float: left; 
    clear: both; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    -ms-transition: all 1s ease-in-out;  
    transition: all 1s ease-in-out; 
} 

#pack4{ 
    margin-right: 20px; 
    margin-top: 20px; 
    height: 193px; 
    width: 127px; 
    background-image: url(../images/comingSoon.png); 
    background-size: 100% 100%; 
    float: right; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    -ms-transition: all 1s ease-in-out;  
    transition: all 1s ease-in-out; 
} 
#body, 
.ui-page { 
background-image: url(../images/bg.png); 
background-size: auto 100%; 
background-repeat: repeat-x; 
} 

#container { 
margin: auto; 
width: 310px; 
height: 568px; 
}

मैं एक फ़ज जो लगभग काम करता है:

$(cardPack).click(function() { 
    var left = $(cardPack).position().left; 
    var top = $(cardPack).position().top; 
    $(cardPack).css("-webkit-transform", "scale(2.5,2.5)"); 
    $(cardPack).css("-webkit-transform-origin", (3*(left/4)) + " " + (3*(top/4))); 
});

लेकिन मुझे लगता है कि एक संयोग और भाग्य की अधिक है। मेरा दिमाग उस बिंदु पर काम नहीं कर रहा है जहां मैं transform-origin सेट करने के लिए कसरत कर सकता हूं ताकि छवि प्रारंभ बिंदु के बावजूद स्क्रीन के केंद्र में समाप्त हो जाए।

ऐसा करने के लिए मुझे transform-origin के विकल्पों पर विचार करने में खुशी है।

संपादित करें: ए 'काफी एक ही अभिनय नहीं कर के रूप में यह स्थानीय स्तर पर करता है "jsfiddle: http://jsfiddle.net/a7Cks/9/

स्रोत

2012-12-05 Matt Fellows

मुझे लगता है कि आप '.position' की बजाय' .offset' का उपयोग करना चाहते हैं क्योंकि दस्तावेज़ के सापेक्ष ऑफसेट है, जबकि '.position' माता-पिता से संबंधित है। –

नोप - ऑफ़सेट इसे और भी बदतर बनाता है - स्थिति केंद्र के काफी करीब एक मान देती है (एक बार जब मैं इसे कम से कम खराब गणित के साथ जोड़ता हूं) –

क्या आप http://jsfiddle.net को अपना कोड प्रदर्शित कर सकते हैं और इसके लिए पूर्ण पथ का उपयोग कर सकते हैं छवियों (या डमी छवियों) ताकि वे दिखाए? फिर लोगों के लिए कोशिश करने और आपकी मदद करने के लिए चारों ओर खेलना आसान होगा। – tw16

सिर्फ मनोरंजन के लिए, क्योंकि हम css3 के बारे में बात कर रहे हैं, वहाँ शुद्ध सीएसएस समाधान, है target: selectiors http://codepen.io/dmi3y/full/keAds का उपयोग कर, यह थोड़ा प्रारंभिक डेटा

एचटीएमएल

<div id="container"> 
    <a href="#pack1" id="pack1" class="screenItem cardPack"></a> 
    <a href="#pack2" id="pack2" class="screenItem cardPack"></a> 
    <a href="#pack3" id="pack3" class="screenItem cardPack"></a> 
    <a href="#pack4" id="pack4" class="screenItem cardPack"></a> 
    </div>

कम

से साफ किया जाता है

#pack1{ 
    margin-left: 20px; 
    margin-top: 20px; 
    float: left; 
    clear: both; 

    &:target { 
     top: 105px; left: 75px; 
     margin-left: 0; 
     margin-top: 0; 
    } 
} 

#pack2{ 
    margin-right: 20px; 
    margin-top: 20px; 
    float: right; 

    &:target { 
     top: 105px; left: -75px; 
     margin-right: 0; 
     margin-top: 0; 
    } 
} 

#pack3{ 
    margin-left: 20px; 
    margin-top: 20px; 
    float: left; 
    clear: both; 

    &:target { 
     top: -105px; left: 75px; 
     margin-left: 0; 
     margin-top: 0; 
    } 
} 

#pack4{ 
    margin-right: 20px; 
    margin-top: 20px; 
    float: right; 

    &:target { 
     top: -105px; left: -75px; 
     margin-right: 0; 
     margin-top: 0; 
    } 
} 

#container { 
    position: relative; 
    margin: auto; 
    width: 310px; 
    height: 568px; 
} 

.screenItem { 
    background: green; 
    position: relative; 
    height: 193px; 
    width: 127px; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    -ms-transition: all 1s ease-in-out;  
    transition: all 1s ease-in-out; 
} 

:target { 
    background: red; 
    z-index: 100; 
    padding: 10px; // + 20 px dimensions 
}

स्रोत

2012-12-13 21:51:20 dmi3y

कूल। पहले कभी भी लक्ष्य चयनकर्ता का उपयोग नहीं किया। – fedmich

ये रहा मेरा अच्छा साहब।

एक बग है जहां आप एनीमेशन चलते समय क्लिक करते रहेंगे तो यह फिर से जाएगा। लेकिन मुझे लगता है कि यह करने का यह एक अच्छा तरीका है।

का उपयोग कर चेतन:

 $(cardPack).animate({ 
      width: '50%', 
      height: '50%', 

     }, 700, function() { 
      $(cardPack).animate({ 
       left: (contwidth - width * 1.5)/2, 
       top: (contheight - (height+height/2) * 1.5)/2 
      }, 300); 
     });

http://jsfiddle.net/a7Cks/11/

यह वस्तु के बीच और नहीं शीर्ष आपत्ति उठाने का केंद्र बनाने के लिए height/2 गयी।

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

स्रोत

2012-12-07 17:06:02 raam86

धन्यवाद - मैं इसे एक विकल्प के रूप में, एक विकल्प के रूप में रखूंगा, लेकिन यह एक संक्रमण में सबकुछ आसान नहीं था, जो मुझे मिला (बस गलत जगह में) सीएसएस स्केल/मूल विकल्प के साथ। –

अच्छी तरह से अपने प्रश्न में आप इसे बढ़ाना चाहते थे और फिर आगे बढ़ना चाहते थे। यहां एक चिकनी एक है http://jsfiddle.net/a7Cks/12/ – raam86

@ram - ओवरलैपिंग एनिमेशन को दूर करने के लिए, आप एक ['.stop()' कमांड] निष्पादित कर सकते हैं (http://api.jquery.com/stop /) '.animate() 'को कॉल करने से पहले। ऐसा कुछ - '$ (...)। रोकें()। एनिमेट (...)' – Lix

css3 ट्रांसफॉर्म-उत्पत्ति का केंद्र और ज़ूम

उत्तर

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