शीर्ष पर

Question

पर CSS3 एनीमेशन द्वारा प्रभावित डिवीजन डिवीजन मेरे पास एक डिव कार्ड है जो क्लिक पर एनीमेशन बजाता है, जिसमें कार्ड स्केलिंग बड़ा होना शामिल है। समस्या यह है कि जैसे ही कार्ड बड़े पैमाने पर होता है, यह किनारों को अन्य कार्ड के नीचे प्रदर्शित किया जाता है। http://puu.sh/oqtEs/5c0d525f8d.png

मैं क्लिक पर लागू होने वाले वर्ग में जेड-इंडेक्स जोड़कर इसे ठीक करने में सक्षम था, लेकिन यह सफारी पर काम नहीं करता था, लेकिन क्रोम, फ़ायरफ़ॉक्स और एज पर काम करता था।

@-webkit-keyframes flipAndZoomAnim 
{ 
    0% { -webkit-transform: rotateY(0deg) scale(0.5) translateZ(1px) } 
    20% { -webkit-transform: rotateY(180deg) scale(0.5) translateZ(1px) } 
    40% { -webkit-transform: rotateY(180deg) scale(1.0) translateZ(1px) } 
    80% { -webkit-transform: rotateY(180deg) scale(1.0) translateZ(1px) } 
    100% { -webkit-transform: rotateY(180deg) scale(0.5) translateZ(1px) } 
} 

@keyframes flipAndZoomAnim 
{ 
    0% { transform: rotateY(0deg) scale(0.5) translateZ(1px) } 
    20% { transform: rotateY(180deg) scale(0.5) translateZ(1px) } 
    40% { transform: rotateY(180deg) scale(1.0) translateZ(1px) } 
    80% { transform: rotateY(180deg) scale(1.0) translateZ(1px) } 
    100% { transform: rotateY(180deg) scale(0.5) translateZ(1px) } 
} 

.flipAndZoom { 
    z-index: 5; 
    webkit-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0); 
    -webkit-animation-name: flipAndZoomAnim; 
    animation-name: flipAndZoomAnim; 
} 

कैसे इस ऑनलाइन करने पर कुछ समाधान नहीं है, लेकिन मैं एनिमेशन के साथ कोई भी नहीं मिला। translateZ(1px) सहित, सुझाव दिया गया था लेकिन काम नहीं किया है, साथ ही translate3d(0,0,0); रूप

एचटीएमएल

<div id="board"> 
    <div id="card1" class="card"> 
      <figure class="front"> 
       <img src="front.jpg"/> 
      </figure> 
      <figure class="back"> 
       <img src="back.jpg"/>  
      </figure> 
    </div> 

    <div id="card2" class="card"> 
      <figure class="front"> 
       <img src="front.jpg"/> 
      </figure> 
      <figure class="back"> 
       <img src="back.jpg"/>  
      </figure> 
    </div> 
</div> 

मैं कार्ड एक div में पंक्ति दर पंक्ति प्रदर्शित किया, जो करने के लिए वे जावास्क्रिप्ट द्वारा जोड़ा जाता है।

for (int i = 0; i < 20; i++) { 
     $('#board').append(card.getHTML()); 
    } 

क्या मैं दिलचस्प है कि कार्ड में ज़ूम इन किया व्यवस्थित कभी नहीं से अधिक अन्य कार्ड के तहत प्रदर्शित किया जाता है, लेकिन लगता है।

यहाँ वेबसाइट है: http://valtterilaine.bitbucket.org/public_html/

Answer 1

translateZ(1px) 

translateZ(-1px) 

के लिए बदल समस्या का समाधान हो। चूंकि कार्ड फ़्लिप किए जाते हैं, इसलिए उन्हें पीछे की तरफ अनुवाद किया जा रहा था।

Answer 2

Z- इंडेक्स howerver स्थिति नियम गायब हो सकता है अपना काम करना चाहिए,।

जेड-इंडेक्स काम करने के लिए, आपको या तो स्थिति के लिए निम्नलिखित मानों पर सेट करना होगा: पूर्ण, सापेक्ष या निश्चित। इस मामले में

position: relative; 

वांछित है, मुझे लगता है।