Victor Victor - 1 month ago 6
jQuery Question

Click does not come after CSS3 transformation

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

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

Comments