Question

I have the problem under Chrome/Safari browsers. After applying CSS3 transformation I don’t receive mouseup and click events (under IE9/10 it work very well).

This is my not working sample:

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

and CSS3 style:

.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

The problem is that you needed to set 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

You can check this links about transformation

• Mozilla doc about Transform
• Transform-origin