CSS3 के रोटेशन संक्रमण रुक-रुक कर माउस क्लिक का पता लगाने

Question

के कारण यह CSS3 Rotate on animated element causing click event not to invoke

काफ़ी मिलती-जुलती मुद्दा हालांकि मेरी समस्या एक बालक अलग है, के साथ साथ जानकारी का समर्थन जोड़ने के लिए इस पर टिप्पणी नहीं कर सकता है।

Checkout मेरी सैंडबॉक्स: http://jsfiddle.net/5bsG3/2/

मैं एक लिंक जो Y अक्ष के चारों ओर घूमता है, माउस हॉवर पर अंदर एक अवधि है। क्लिक इवेंट (jQuery के लिए या बस लिंक नेविगेशन के लिए) हमेशा पता नहीं लगाया जाता है। लिंक के गद्देदार क्षेत्र पर क्लिक करने का प्रयास करें (बस पाठ से बाहर लेकिन लिंक पर)। यह लगभग है जैसे हिट डिटेक्शन के साथ कोई समस्या है क्योंकि अवधि कताई है और इस प्रकार कोणों पर जहां माउस अवधि पर क्लिक नहीं कर रहा है। भले ही माउस अभी भी लिंक के गद्देदार क्षेत्र पर क्लिक कर रहा हो। 70-110deg के आसपास कोण समस्या है।

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

किसी भी विचार? क्या किसी ने इसे पहले कभी देखा है? मुझे पता है कि यह लिंक करने का एक प्यारा तरीका है लेकिन लक्ष्य वेबसाइट के लिए, यह एक स्वीकार्य राशि पनीर है।

jsfiddle को सरल बनाने के लिए स्वतंत्र महसूस करें, मैंने सरल शुरुआत की और समस्या की पहचान करने में सहायता के लिए कुछ डीबगिंग जानकारी जोड़ दी।

एचटीएमएल:

सीएसएस:

ul li 
{ 
    display: inline; 
    float: left ; 
} 

.flip-link 
{ 
    float:left ; 
} 

span 
{ 
    float:left ; 
} 


.flip-link { 
    display: block; 
    overflow: hidden; 

    height: 20px; 
    padding: 5px 50px 7px 50px ; 
    margin-right: 10px ; 

    background: #AAA; 

    -webkit-perspective: 50px; 
     -moz-perspective: 50px; 
     -ms-perspective: 50px; 
      perspective: 50px; 

    -webkit-perspective-origin: 50% 50%; 
     -moz-perspective-origin: 50% 50%; 
     -ms-perspective-origin: 50% 50%; 
      perspective-origin: 50% 50%; 
} 

.flip-link span { 
    display: block; 
    position: relative; 

    background: #EEE; 

    padding: 0px 10px ; 

    -webkit-transition: all 1000ms ease; 
     -moz-transition: all 1000ms ease; 
     -ms-transition: all 1000ms ease; 
      transition: all 1000ms ease; 

    -webkit-transform-origin: 50% 0%; 
     -moz-transform-origin: 50% 0%; 
     -ms-transform-origin: 50% 0%; 
      transform-origin: 50% 0%; 

    -webkit-transform-style: preserve-3d; 
     -moz-transform-style: preserve-3d; 
     -ms-transform-style: preserve-3d; 
      transform-style: preserve-3d; 

} 
    .flip-link:hover span 
    { 
     -webkit-transform: translate3d(0px, 0px, 0px) rotateY(360deg); 
      -moz-transform: translate3d(0px, 0px, 0px) rotateY(360deg); 
      -ms-transform: translate3d(0px, 0px, 0px) rotateY(360deg); 
       transform: translate3d(0px, 0px, 0px) rotateY(360deg); 

     color: #55FF55 ; 
    } 

जे एस:

var linkClickCount = 0 ; 
var spanClickCount = 0 ; 

$(document).ready(function() { 
    $('.flip-link').click(function() { 
      linkClickCount++ ;    
      $("#LinkCounter").text(linkClickCount); 

      return (false); 
    }); 

    $('.flip-link span').click(function() { 
      spanClickCount++ ;    
      $("#SpanCounter").text(spanClickCount); 
    }); 
}); 

Answer 1

समस्या। चूंकि सीएसएस का उपयोग करके ब्राउज़र की असमानताएं हैं, और ब्राउज़र के बीच भी असमानताएं हैं, इसलिए आपको शुद्ध सीएसएस समाधान का उपयोग करने में समस्या होगी। आपको यह भी महसूस करना होगा कि जब एनीमेशन के बीच में होता है तो सीएसएस वास्तव में आपके divs को ध्वस्त कर देता है। हमारी दृष्टि वास्तव में नहीं है कि क्या चल रहा है, यह वास्तव में div आकार को 0 पर गिर रहा है, जिसका अर्थ है कि जब आप क्लिक करते हैं तो आप वास्तव में इसे क्लिक करने में सक्षम नहीं होंगे। नीचे दिखाता है कि आपको एक पूर्ण स्थानांतरित div को ओवरले के रूप में रखना चाहिए और क्लिक को संभालना चाहिए यहां तक ​​कि एक स्पष्ट, गैर दिखाई div है कि अभी भी आप वास्तव में एक लिंक पर क्लिक के भ्रम होगा से।

<a id="link"></a> 

$("#link").click(function(){ 

spanClickCount++; 
$("#SpanCounter").text(spanClickCount); 

} 

Answer 2

एक तत्व यह है कि इतना है कि यह पीछे है पीछे पर क्लिक प्राप्त नहीं होगा दिखाया गया है घुमाया जाता है, जब तक आप विशेष रूप से पीछे दिखाई दे सकता है मजबूर

अपने अवधि पर इस का उपयोग करें:।

-webkit-backface-visibility: visible; 
    -moz-backface-visibility: visible; 
    -ms-backface-visibility: visible; 
    -o-backface-visibility: visible; 

देखें: http://jsfiddle.net/5bsG3/8/