I have a pretty neat screen flip started here where you click on a panel and it flips over to reveal a different panel of content altogether. Using webkit to handle the 3D-esque rotation and Javascript to handle the onclicks (or "ontouch" for iPad).

Question is, the functionality works properly and the transition is smooth.... just one tiny thing though - for reasons currently unknown, the second side (purple) is only clickable on the right half of the panel. Left side is unclickable for some reason. The first side (red) does not have this issue.

All code is below for anyone willing to have a quick look at this for me. Thanks in advance for any ideas on how to fix this....


Code:
<!DOCTYPE html>

<html lang="en"><head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
      
    <style type="text/css">
		

		body {margin-top: 20px; height: 300px; font-size: 12px; line-height: 1.5em; font-family: "Lucida Grande", Verdana, Arial;}

	   #flipwrapper {height:150px; width:250px; position: relative; margin: 10px auto; z-index: 1;}
	   #flipwrapper.active { -webkit-transform: perspective(200px) rotateY(180deg); -webkit-transition: -webkit-transform 1s; -webkit-transform-style: preserve-3d;}
	   #flipwrapper.inactive {-webkit-transition: -webkit-transform 1s;}
	   
	   @media all and (-webkit-transform-3d) {
		 /* Use the media query to determine if 3D transforms are supported */
		#facefront {height:150px; border:2px solid green; background-color: red; font-size: 12pt; color: white; -webkit-border-radius: 10px; text-align: center; padding:10px;}
		#faceback {height:150px; font-size: 12pt; color: white; text-align: center; background-color: purple; display:none; -webkit-border-radius: 10px; padding:10px;}
		
		#faceback.active {border:2px solid grey; display:block; -webkit-transform: rotateY(180deg);}
		#facefront.active {border:2px solid yellow; display:block;}
    	#faceback.inactive {-webkit-backface-visibility: hidden; display:none; }
		#facefront.inactive {-webkit-backface-visibility: hidden; display:none;}
    </style>
    
    <script type="text/javascript">
		function flipscreen() {
		var flipwrapper = document.getElementById('flipwrapper');
		
		    if(flipwrapper.className!='active') {
                flipwrapper.setAttribute('class','active');
				faceback.setAttribute('class','active');
				facefront.setAttribute('class','inactive');
            }
			
			else {
                flipwrapper.setAttribute('class','inactive');
				faceback.setAttribute('class','inactive');
				facefront.setAttribute('class','active');
            }
			
            return;

		}
	</script>
    
</head>
<body >


	<div id="flipwrapper" onclick="flipscreen()">						

            <div id="facefront">
              <div>This is where the front face content goes</div>
            </div>
            <div id="faceback">
              <div>This flip effect is done with 3D transitions with only a little bit of JavaScript required!</div>
            </div>
        
	</div>
</body>
</html>