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

Question

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

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

一旦父元素被旋转以显示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>

Run Code Online (Sandbox Code Playgroud)

JSFiddle问题的例子 - 可以在这里找到!

Answer 1

Thi*_*Rao 10

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

@kristiankeane的解决方案使另一半无法点击.我也在使用容器作为包装器.事实证明,这是webkit中的一个奇怪的错误,我能够修复它并通过改变transform:rotateY(180deg)来变换:rotateY(-180deg)使100%的元素可点击

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

Answer 2

Kri*_*ris 2

看来您缺少一个容器（就像我缺少它一样）。

查看官方文档

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

归档时间：	14 年，1 月前
查看次数：	3474 次
最近记录：	12 年，1 月前