Question

我遇到了一个相当奇怪的问题。我有一个可以通过CSS3旋转的div。 div有一个前div子和后div子，后div有-webkit-transform: rotateY( 180deg )设置。

一旦旋转父元素以显示div的背面的问题，它将仅检测div正好一侧的子元素的点击，特别是div或右侧的后半部分。正面div检测元素整个面上的咔嗒声。此外，z指数很好。我认为问题可能是由于旋转和浏览器显示一半“更近”？

这个破解的代码非常复杂，所以我创建了一个测试文件来演示下面的问题。我正在使用我为3D转换编写的jQuery插件，可以在https://github.com/pwhisenhunt/jquery.transform/blob/master/jquery.transform.js找到。

编辑：经过实验，点击按钮元素只能注册100-200px而不是0-100px。换句话说，它实际上只是在div的后半部分注册。

非常感谢任何帮助！

<html>
<head>
    <style>
        .element{
            width:200;
            height:200;

            -webkit-perspective: 800;
            -webkit-transform-style: preserve-3d;
        }

        .element figure {
          display: block;
          height: 100%;
          width: 100%;
          position: absolute;
          -webkit-backface-visibility: hidden;
            border:1px solid yellow;
        }

        .element .front {
            -webkit-border-radius:8px;
            padding: 0px;
            margin: 0px;
            background-color:yellow;
            z-index: 9870;
        }

        .element .back {
            -webkit-border-radius:8px;
            padding: 0px;
            margin: 0;
            -webkit-transform: rotateY( 180deg );
            z-index: 0;
            border: 1px solid red;
            background-color:green;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
            <script src="https://raw.github.com/pwhisenhunt/jquery.transform/master/jquery.transform.js"></script>
    <script>
        $(function(){
            var temp = false;
            $(".element").click(function(){
                if(temp == false){
                    $(this).transform("setAnimationDuration", 1).transform("rotateY", 180);
                    $(this).unbind("mouseenter mouseleave");
                    button = $(document.createElement('div')).attr("id", "button").css({ width: 200, height: 50, backgroundColor:"blue" });
                    button.click(function(){
                        console.log("Clicking");
                    });
                    temp = true;
                    $(this).append(button);
                }
            })
        })
    </script>
</head>
<body>
    <div class="element">
        <figure class="front"></front>
        <figure class="back"></front>
    </div>
</body>
</html>

A JSFiddle Example of the Problem - Can be found HERE!

Answer 1

我知道这个回复对我们这里的大多数人来说有点太迟了，但我今天早些时候遇到了这个问题，没有一个回复帮我解决了。

@kristiankeane的解决方案使另一半无法点击。我也是using a container for the wrapper。事实证明，这是webkit中的一个奇怪的错误，我能够通过改变transform：rotateY（180deg）来变换：rotateY（-180deg）来修复它并使100％的元素可点击。

这真的很奇怪，我不知道它是如何工作的，但确实如此。我希望这可以帮助别人！

Answer 2

我有同样的问题，能够通过在翻转时略微改变父旋转来修复它 - 我改变了

`.flip-holder.flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}`

到

`$.flip-holder.flipped {
-webkit-transform: rotateY(180.5deg);
-moz-transform: rotateY(180.5deg);
transform: rotateY(180.5deg);
}`

现在可以点击整个背面（加上绝对定位的溢出元素），并且浏览器没有渲染额外的0.5度旋转，因此文本和图像都是清晰的。

Answer 3

似乎你错过了一个容器（就像我错过了它一样）。

请参阅the official documentation

它不是外部元素被翻转，而是内部的包装。这反过来导致显示两个div之一（并发生转换）

Answer 4

稍微翻译正面和背面，它们不会重叠。

示例：

    .element .front {
        -webkit-transform: translateZ(1px);
    }

    .element .back {
        -webkit-transform: rotateY(180deg) translateZ(1px);
    }

Answer 5

可能（并且我只是推测）你应该使用live或delegate事件绑定而不是常规事件。我猜测点击事件可能会“记住”一些没有旋转的原始div位置。

Answer 6

所有技巧都旋转回来并旋转到180.5和其他...... 问题只能通过以下方式解决：当旋转结束时 - 创建新元素，从旋转元素克隆html，并插入新元素而不是旧元素

Answer 7

如果您的翻卡结构如下：

<div class="flipcard">
    <div class="flipcard-front">
    </div>
    <div class="flipcard-back">
    </div>
</div>

然后将其添加到您的CSS：

.flipcard:hover {
    pointer-events: none;
}
.flipcard-back:hover {
    pointer-events: auto;
}

180度旋转div只能从一侧点击

7 个答案: