Victor Victor - 1 year ago 73
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) {

$(".box").mouseup(function (e) {

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

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

and CSS3 style:

.box {

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

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download