css3 - CSS 3D转换 - 无法单击链接 - Thinbug

CSS 3D转换 - 无法单击链接

时间：2013-08-29 15:05:31

标签： css3 css-transforms

我正在尝试在我的网页上添加一个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

1 个答案:

答案 0 :(得分：3)

我认为backface-visibility属性不需要在包装器上声明，只需要在内部div上声明。如果您从backface-visibility

中删除.thumb.flip .thumb-wrapper.flipper属性，它似乎有效