घूमते समय div को गायब नहीं करना है (90deg)

Question

मेरे वेबपृष्ठ पर मेरे पास एक div है। उस div पर मेरे पास "एनीमेशन" है जो div को चालू (फ़्लिप) पर अनुकरण करता है।

<div id="wrapper"> 
    <div id="content"> 
     Some content 
    </div> 
</div> 

मैं jQuery plugin transit के साथ "रैपर" div घुमाता हूं। प्लगइन क्या करता है बस सीएसएस लागू होता है;

transform: rotateY(180deg); 

जब div rotateY(90deg) पर है, मैं #content div में कुछ नई सामग्री लोड करने के लिए की है। इसमें थोड़ी सी मात्रा लगती है, लेकिन एनीमेशन में आप देख सकते हैं कि उस समय div div/छुपा हुआ है।

SEE DEMO FIDDLE (ध्यान दें कि मैं यहाँ में वास्तविक सामग्री लोड हो रहा है नहीं है)

क्या यह संभव है गोता पूरी तरह से गायब नहीं जब rotateY(90) के लिए?

दुर्भाग्यवश मेरे पास HTML पर कोई नियंत्रण नहीं है क्योंकि यह उत्पन्न हो रहा है। यह करने के लिए मोटाई जोड़ने के लिए

Answer 1

प्रयास करें। इस तरह कुछ देखें: want to show the thickness of an element while it rotate

लेकिन सीएसएस की एनीमेशन बनाएं: 0%: परिवर्तन: rotateY (0deg); 50%: परिवर्तन: घुमावदार (90 डिग्री); 100%: परिवर्तन: घुमावदार (180 डिग्री);

उम्मीद है कि इससे मदद मिलती है।

सुनिश्चित करें कि jQuery प्लगइन में सीएसएस फ़ाइलें हैं या इसमें देखें।

और आप मूल सीएसएस और jQuery का उपयोग करके भी ऐसा कर सकते हैं।

Answer 2

div की सामग्री को न बदलें, बस दोनों पक्षों बनाने के लिए:

<div id="wrapper"> 
    <div class="side-a"> 
     Some content 
    </div> 
    <div class="side-b"> 
     Some content 
    </div> 
</div> 

सीएसएस:

#wrapper{ 
    transition: all 2s; 
    position: relative; 
} 
#wrapper.flip{ 
    transform: rotateY(180deg); 
} 
.side-a{ 
    z-index: 1; 
    opacity: 1; 
    position: absolute; 
    height: 100%; 
    transition-delay: 1s; //half the transition time of the wrapper 
} 
.side-b{ 
    z-index: 0; 
    opacity: 0; 
    transform: rotateY(180deg); 
    position: absolute; 
    height: 100%; 
    transition-delay: 1s; 
} 
.flip side-a{ 
    z-index: 0; 
    opacity: 0; 
} 
.flip side-b{ 
    z-index: 1; 
    opacity: 1; 
} 

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

$('.next-slide').click(function(){ 
    $('#wrapper').addClass('flip'); 
}); 
$('.prev-slide').click(function(){ 
    $('#wrapper').removeClass('flip'); 
});