jquery - CSS3改造后点击不来

Question

我在 Chrome/Safari 浏览器下遇到问题。应用 CSS3 转换后，我没有收到 mouseup 和 click 事件(在 IE9/10 下效果很好)。

这是我不工作的示例:

<script type="text/javascript">
    $(".box").mousedown(function (e) {
        $(this).addClass('transform');
    });

    $(".box").mouseup(function (e) {
        $(this).removeClass('transform');
    });

    $(".box").click(function (e) {
        alert("Click"); // Not worked under Chrome/Safari !
    });
</script>

<div class="box"></div>

和 CSS3 样式:

.box {
    background-color:#f00;
    width:200px;
    height:200px;
}

.transform {
    transform-origin: 0% 50%;
    transform: rotateY(10deg);
    -ms-transform-origin: 0% 50%;
    -ms-transform: rotateY(10deg);
    -webkit-transform-origin: 0% 50%;
    -webkit-transform: rotateY(10deg);
}

Answer 1

问题是你需要设置position:absolute:

.transform {
    transform-origin: 0% 50%;
    transform: rotateY(30deg);
    -ms-transform-origin: 0% 50%;
    -ms-transform: rotateY(30deg);
    -webkit-transform-origin: 0% 50% 0px;
    -webkit-transform: rotateY(-31deg);
}​

Check this Demo UPDATED 2

你可以查看这个关于转换的链接

• Mozilla doc about Transform
• Transform-origin