CSS 3D transform - Unable to click link

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.

Question

Why is this occurring?
How could this be solved so I can click the link once I flipped the card?

Example

http://jsfiddle.net/rbWFt/

Code

<!DOCTYPE html>
<html>
  <head>
    <title>Flipp</title>

    <meta charset="utf-8">

    <style>
      .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%;
      }
    </style>
  </head>

  <body>
    <div class="thumb flip">
      <div class="thumb-wrapper">
        <div class="thumb-front">
        </div>

        <div class="thumb-back">
          <a href="/">
            Baz
          </a>
        </div>
      </div>
    </div>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
      $(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');            
          }
        );
      });
    </script>
  </body>
</html>

Recognition

This is mostly a part of the following tutorial: http://www.queness.com/post/11493/create-css-3d-transform-card-flip-gallery

标签： css3 css-transforms

1条回答

萌系小妹纸

2楼-- · 2019-07-07 05:07

I think the backface-visibility property needs not be declared on the wrapper, just the internal divs. It seems to work if you remove the backface-visibility properties from .thumb.flip .thumb-wrapper.flipper

0人赞添加讨论(0) 举报