क्लिक करने योग्य 3 डी आकृति बनाना

Question

मेरे पास एक सीएसएस-केवल फ्लिप कार्ड एनीमेशन है जहां उपयोगकर्ता के कंटेनर पर होवर करते समय कार्ड के दूसरी तरफ दिखाया जाता है: https://jsfiddle.net/qb7unks5/3/।

कार्ड के दोनों किनारे क्लिक करने योग्य लिंक होना चाहिए। आदर्श रूप से, संपूर्ण कंटेनर एक क्लिक करने योग्य लिंक होगा, लेकिन इसके लिए मेरे पास कोड फ़ायरफ़ॉक्स में काम नहीं करता है। चूंकि JSFiddle में लिंक कभी भी फ़ायरफ़ॉक्स में काम नहीं करते हैं, तो आप वास्तव में JSFiddle का उपयोग करके इसे नहीं देख सकते हैं, लेकिन यदि आप कोड को सहेजना चाहते हैं और इसे स्वतंत्र रूप से चलाते हैं, तो आप पाएंगे कि अक्सर, फ़ायरफ़ॉक्स में लिंक सक्रिय करने में विफल रहता है दो परिस्थितियों में:

(1) जब आप माउस को कंटेनर में जल्दी से ले जाते हैं और लाल कार्ड के टेक्स्ट पर क्लिक करते हैं। पाठ काला हो जाता है, यह दर्शाता है कि a:active प्रभाव ट्रिगर किया गया है, लेकिन लिंक वास्तव में सक्रिय नहीं है।

(2) जब आप कार्ड फ्लिप एनीमेशन सक्रिय होते हैं तो ग्रे-बोर्डर्ड कंटेनर के एक सफेद (गैर-लाल, गैर-नीले) क्षेत्र पर क्लिक करते हैं, तो लिंक कभी-कभी सक्रिय करने में विफल रहता है।

ये दोनों समस्याएं केवल फ़ायरफ़ॉक्स में होती हैं, क्रोम नहीं। और फिर, फ़ायरफ़ॉक्स में जेएसफ़िल्ड लिंक को कैसे संभालता है, इसके कारण आप वास्तव में JSFiddle लिंक का उपयोग करके नहीं बता सकते हैं।

समस्या यह है कि, जाहिरा तौर पर, आप एक लिंक है कि किसी तरह फ़ायरफ़ॉक्स में एक घूर्णन आंकड़ा साथ जुड़ा हुआ है पर क्लिक करते हैं है, और यह आंकड़ा लगभग तुरंत बाद, लिंक की a:active राज्य शुरू हो रहा है "दूर घूमता है", लेकिन लिंक सक्रिय नहीं है!

तो, मुझे लगता है कि मुझे एक ही आकार और कंटेनर के आकार के <a style='display:block'> ब्लॉक बनाना होगा, इसके जेड-इंडेक्स को आंकड़ों की तुलना में अधिक बनाना होगा, और, ऐसा करके, अनिवार्य रूप से बनाना पूरे कंटेनर का क्षेत्र सीधे लिंक से जुड़े लिंक के माध्यम से क्लिक करने योग्य नहीं है। क्या कोई बेहतर समाधान है?

figure { 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    width: 200px; 
 
    height: 260px; 
 
    position: relative; 
 
    margin: 0 auto 40px; 
 
    border: 1px solid #CCC; 
 
    -webkit-perspective: 800px; 
 
     -moz-perspective: 800px; 
 
     -o-perspective: 800px; 
 
    \t  perspective: 800px; 
 
    } 
 

 
.card { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    -webkit-transition: -webkit-transform 1s; 
 
     -moz-transition: -moz-transform 1s; 
 
     -o-transition: -o-transform 1s; 
 
      transition: transform 1s; 
 
    -webkit-transform-style: preserve-3d; 
 
     -moz-transform-style: preserve-3d; 
 
     -o-transform-style: preserve-3d; 
 
      transform-style: preserve-3d; 
 
} 
 

 
.container:hover .card { 
 
    -webkit-transform: rotateY(180deg); 
 
     -moz-transform: rotateY(180deg); 
 
     -o-transform: rotateY(180deg); 
 
      transform: rotateY(180deg); 
 
} 
 

 
.card figure { 
 
    display: block; 
 
    height: 100%; 
 
    width: 100%; 
 
    line-height: 260px; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    font-size: 30px; 
 
    position: absolute; 
 
    -webkit-backface-visibility: hidden; 
 
     -moz-backface-visibility: hidden; 
 
     -o-backface-visibility: hidden; 
 
    \t  backface-visibility: hidden; 
 
} 
 
\t 
 
.card .front { 
 
    background: red; 
 
} 
 

 
.card .back { 
 
    background: blue; 
 
    -webkit-transform: rotateY(180deg); 
 
     -moz-transform: rotateY(180deg); 
 
     -o-transform: rotateY(180deg); 
 
      transform: rotateY(180deg); 
 
} 
 

 
a { 
 
    color: white; 
 
} 
 

 
a:active { 
 
    color: black; 
 
}

<a href="http://google.com"> 
 
    <div class="container"> 
 
     <div class="card"> 
 
      <figure class="front">Some test text</figure> 
 
      <figure class="back">More text</figure> 
 
     </div> 
 
    </div> 
 
</a>

Answer 1

मैं एक ब्लॉक स्तर <a> पर :after के pseudo इस्तेमाल किया है।

वांछित परिणाम प्राप्त करते समय यह अतिरिक्त HTML मार्कअप की आवश्यकता को खत्म कर देगा।

छद्म रिश्तेदार माता-पिता को पूर्ण 100% रखा गया है ताकि यह माता-पिता के आकार को कवर करे, भले ही वह परिवर्तन हो।

CODEPEN example

नोट: है कि अपने मूल <div class="container"> इस समाधान के साथ <a> टैग में ही समेकित किया जा सकता है।

सीएसएस

a.container { 
    color: white; 
    position: relative; 
    display: block; 
    width: 200px; 
    height: 260px; 
    position: relative; 
    margin: 0 auto 40px; 
    border: 1px solid #CCC; 
    -webkit-perspective: 800px; 
    -moz-perspective: 800px; 
    -o-perspective: 800px; 
     perspective: 800px; 
} 

a.container:after { 
    content: ''; 
    display:block; 
    width: 100%; 
    height: 100%; 
    z-index: 9999; 
    position: absolute; 
    top: 0; 
} 

एचटीएमएल

<a class="container" href="http://google.com"> 
    <div class="card"> 
    <figure class="front">Some test text</figure> 
    <figure class="back">More text</figure> 
    </div> 
</a>