CSS 3D变换 - 无法点击链接

Question

CSS 3D变换 - 无法点击链接

csscss-transforms

3

我正在尝试在我的网页上添加CSS 3D变换效果，但是当卡片翻转后，我点击链接时遇到了一些问题。

问题

为什么会出现这种情况？
如何解决这个问题，以便我可以在翻转卡片后点击链接？

示例

http://jsfiddle.net/rbWFt/

代码

<!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>

识别

这主要是以下教程的一部分：http://www.queness.com/post/11493/create-css-3d-transform-card-flip-gallery

- superhero

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Trevan Hetzel · Accepted Answer

我认为backface-visibility属性不需要在包装器上声明，只需在内部div上声明即可。如果从.thumb.flip .thumb-wrapper.flipper中删除backface-visibility属性，则似乎可以正常工作。