Html 180度旋转div只能从一侧单击_Html_Css

Html 180度旋转div只能从一侧单击

html css

Html 180度旋转div只能从一侧单击,html,css,Html,Css,我遇到了一个相当奇怪的问题。我有一个可以通过CSS3旋转的div。div具有前div子级和后div子级，后div具有-webkit transform:rotateY（180度）集问题是，一旦父元素旋转以显示div的背面，它将仅检测到子元素在div的一侧（特别是div的后半部分或右侧）上的单击。前侧div检测元件整个表面上的咔哒声。此外，z索引也很好。我认为问题可能是由于旋转和浏览器显示一半的边“更近” 这将破坏的代码极其复杂，因此我创建了一个测试文件来演示下面的问题。我正在使用我为3D转换编

我遇到了一个相当奇怪的问题。我有一个可以通过CSS3旋转的div。div具有前div子级和后div子级，后div具有

-webkit transform:rotateY（180度）

集

问题是，一旦父元素旋转以显示div的背面，它将仅检测到子元素在div的一侧（特别是div的后半部分或右侧）上的单击。前侧div检测元件整个表面上的咔哒声。此外，z索引也很好。我认为问题可能是由于旋转和浏览器显示一半的边“更近”

这将破坏的代码极其复杂，因此我创建了一个测试文件来演示下面的问题。我正在使用我为3D转换编写的jQuery插件，可以在这里找到

编辑：实验后，按钮元素的点击仅从100-200px开始注册，而不是从0-100px开始注册。换言之，它实际上只是在分区的后半部分注册

非常感谢您的帮助

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


.元素{
宽度：200；
身高：200；
-webkit透视图：800；
-webkit变换样式：保留-3d；
}
.元素图形{
显示：块；
身高：100%；
宽度：100%；
位置：绝对位置；
-webkit背面可见性：隐藏；
边框：1px纯黄色；
}
.元素.前面{
-webkit边界半径：8px；
填充：0px；
边际：0px；
背景颜色：黄色；
z指数：9870；
}
.元素，回来{
-webkit边界半径：8px；
填充：0px；
保证金：0；
-webkit变换：旋转（180度）；
z指数：0；
边框：1px纯红；
背景颜色：绿色；
}
$（函数（）{
var-temp=false；
$（“.element”）。单击（函数（）{
如果（临时==假）{
$（this）.transform（“setAnimationDuration”，1）.transform（“rotateY”，180）；
$（此）.unbind（“mouseenter mouseleave”）；
button=$（document.createElement（'div'））.attr（“id”，“button”）.css（{宽度：200，高度：50，背景色：“蓝色”}）；
按钮。单击（函数（）{
控制台日志（“单击”）；
});
温度=真；
$（此）.append（按钮）；
}
})
})

可能（我只是猜测）您应该使用实时或委托事件绑定而不是常规绑定。我推测点击事件可能“记住”了一些没有旋转的原始div位置。

看起来您丢失了一个容器（与我丢失它的方式大致相同）

看

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

我遇到了完全相同的问题，可以通过在翻转时稍微更改父旋转来解决它-我更改了

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

到

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

我知道这个回复对我们大多数人来说有点太晚了，但今天早些时候我遇到了这个问题，没有任何回复帮助我解决它

解决方案使另一半不可点击。我也是。事实证明，这是webkit中的一个奇怪错误，我能够修复它，并通过将transform:rotateY（180度）更改为transform:rotateY（-180度）使元素100%可点击

这真的很奇怪，我不知道它是怎么工作的，但它确实做到了。我希望这对别人有帮助

在所有技巧之后，如旋转到后面，旋转到180.5和其他。。。问题仅通过以下方式修复：

当旋转结束时-创建新元素，从旋转后的元素克隆html，插入新元素而不是旧的

前后翻译一点，它们不会重叠

例如：

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

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

如果您的翻转卡结构如下所示：

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

你介意为这个问题写一篇文章吗？我编辑了这个问题以包含一个问题的例子，你必须下载jquery插件进行3d转换。谢谢我也有同样的问题，在一个hi上工作，我在旋转重叠的div时也面临同样的问题。你能帮我解决这个问题吗。我试过live（）和delegate，结果都一样……谢谢。链接很棒！旋转时没有问题。他为什么不接受这个答案？！工作完美！谢谢我发现这是唯一有效的解决方案。但关键是只将translateZ应用于您刚刚翻转到背面的卡，并且仅当它翻转时才应用。这样，您就不会受到translateZ可能导致的模糊渲染的影响。

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

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