title: CSS 3D transform - Unable to click link
body: <p>I'm attempting to include a CSS 3D transform effect on my webpage, though I have some issues with clicking the links once the card has flipped over.</p>
  
  <h3>Question</h3>
  
  <p>Why is this occurring?<br>
  How could this be solved so I can click the link once I flipped the card?</p>
  
  <h3>Example</h3>
  
  <p><a href="http://jsfiddle.net/rbWFt/" rel="nofollow">http://jsfiddle.net/rbWFt/</a></p>
  
  <h3>Code</h3>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Flipp&lt;/title&gt;
  
      &lt;meta charset="utf-8"&gt;
  
      &lt;style&gt;
        .thumb 
        {
          display:block;
          width:300px;
          height:340px;
          position:relative;
          margin:50px;
          float:left;
        }
  
        .thumb-wrapper
        {
          display:block;
          width:100%;
          height:100%;
          color: #A29088;
        }
  
        .thumb .thumb-front
        {
          width:100%;
          height:100%;
          position:absolute;
          display:block;
          background:#ff0;
  
        }
  
        .thumb .thumb-back
        {
          width:100%;
          height:100%;
          position:absolute;
          display:block;
          background:#f00;
        }
  
        /* Flipp effect */
  
        .thumb.flip 
        {
          -webkit-perspective: 800px;
             -moz-perspective: 800px;
              -ms-perspective: 800px;
               -o-perspective: 800px;
                  perspective: 800px;
        }
  
        .thumb.flip .thumb-wrapper 
        {
          -webkit-transition: -webkit-transform .35s;
             -moz-transition: -moz-transform .35s;
              -ms-transition: -moz-transform .35s;
               -o-transition: -moz-transform .35s;
                  transition: -moz-transform .35s;
  
          -webkit-transform-style: preserve-3d;
             -moz-transform-style: preserve-3d;
              -ms-transform-style: preserve-3d;
               -o-transform-style: preserve-3d;
                  transform-style: preserve-3d;        
        }
  
        .thumb.flip .thumb-wrapper.flipper,
        .thumb.flip .thumb-front,
        .thumb.flip .thumb-back
        {
          -webkit-backface-visibility: hidden;
             -moz-backface-visibility: hidden;
              -ms-backface-visibility: hidden;
               -o-backface-visibility: hidden;
                  backface-visibility: hidden;
        }
  
        .thumb.flip .thumb-wrapper.flipper,
        .thumb.flip .thumb-back
        {
          -webkit-transform: rotateY(-180deg);
             -moz-transform: rotateY(-180deg);
              -ms-transform: rotateY(-180deg);
               -o-transform: rotateY(-180deg);
                  transform: rotateY(-180deg);          
        }
  
        a
        {
          display: block;
          width: 100%;
          height: 100%;
        }
      &lt;/style&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div class="thumb flip"&gt;
        &lt;div class="thumb-wrapper"&gt;
          &lt;div class="thumb-front"&gt;
          &lt;/div&gt;
  
          &lt;div class="thumb-back"&gt;
            &lt;a href="/"&gt;
              Baz
            &lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
        $(function () 
        {
          // add/remove flip class that make the transition effect
          $('.thumb.flip').hover(
            function ()
            {
              $(this).find('.thumb-wrapper').addClass('flipper');
            },
  
            function ()
            {
              $(this).find('.thumb-wrapper').removeClass('flipper');            
            }
          );
        });
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h3>Recognition</h3>
  
  <p>This is mostly a part of the following tutorial: <a href="http://www.queness.com/post/11493/create-css-3d-transform-card-flip-gallery" rel="nofollow">http://www.queness.com/post/11493/create-css-3d-transform-card-flip-gallery</a></p>