I’ve run into a rather strange problem. I have a div that is rotatable

Question

0

Asked: May 27, 20262026-05-27T09:27:56+00:00 2026-05-27T09:27:56+00:00

I’ve run into a rather strange problem. I have a div that is rotatable

0

I’ve run into a rather strange problem. I have a div that is rotatable via CSS3. The div has a front div child and back div child, with the back div having -webkit-transform: rotateY( 180deg ) set.

The problem that once the parent element is rotated to display the back side of the div, it will only detect clicks of child elements on exactly one side of the div, specifically the second half of the div or right side. The front side div detects clicks on the entire face of element. Also, the z-indexes are fine. I assume that the issue may be due to the rotation and the browser displaying one half of the side “closer”?

The code that this is breaking is extremely complex, so I created a test file to demonstrate the problem below. I’m using a jQuery plugin I wrote for the 3D transformations, which can be found here https://github.com/pwhisenhunt/jquery.transform/blob/master/jquery.transform.js.

Edit: After experimentation, the clicking of the button element is only registering from 100-200px and not from 0-100px. In other words, it is in fact only registering on the second half of the div.

Any help is very much appreciated!

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

A JSFiddle Example of the Problem – Can be found HERE!