How to prevent CSS3 transform from make elements unclickable


Please look at my live code ::


CSS3 translate: rotate() makes elements unclickable unless rotations == 0

I'm using the accelorameter to move elements over an axis. Unfortunatly these elements become unclickable when their rotations isnt at at (0,0,0). How do I fix this, so that all elements are clickable at all times?

 <div ng-app="morningharwoodApp" ng-controller="MainCtrl">
  <div class="wrap">
    <div class="cube">
      <div class="icon-wrapper">
        <div class="icons" ng-repeat="(key, val) in squares" ng-style="perspective" ng-click="">
          <p>x: {{acceleration.x }}</p>
          <p>y: {{acceleration.y}}</p>
          <p>z: {{acceleration.z}}</p>



 html, body, .page-container {
  box-sizing: border-box;
  height: 100%;
*, *:before, *:after {
  box-sizing: inherit;
.group:after {
  content: "";
  display: table;
  clear: both;

.wrap {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 3.5%;
  font-family: Helvetica, Arial, sans-serif;


.cube {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(;
  background-size: cover;
  padding: 30px;

  @extend .group;


.icon-wrapper {

  @extend .group;
.fill {
   @extend .group;
   height: 100%;
   width: 100%;
   position: relative;
   background: #fff;
.icons {
    padding: 25px;
    height: 250px;
    width: 250px;
    margin: 12px;
    color: #fff;
    background: black;
    float: left;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);

    -webkit-transition: -webkit-transform 500ms ease;
    -moz-transition: -moz-transform 250ms ease;
    -o-transition: -o-transform 250ms ease;
    transition: transform 250ms ease;
    transform-style: preserve-3d;

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    -o-transform-origin: top center;
    transform-origin: top center;




$scope.navigation = {
  status: false

$scope.toggle = {
  menu: function() {
    $scope.navigation.status = !$scope.navigation.status;

$scope.squares = [1,2,3,4,5,6,7,8];

    if ($window.DeviceMotionEvent !== undefined) {
      $window.ondevicemotion = function(event) {

        $scope.acceleration = {            
          x: Math.min(Math.max(parseInt(event.accelerationIncludingGravity.x*10), -30), 30) | 0,      
          y: Math.min(Math.max(parseInt(event.accelerationIncludingGravity.y*2), -30), 30) | 0,  
          z: Math.min(Math.max(parseInt(event.accelerationIncludingGravity.z), -30), 30) | 0
        $scope.perspective = {
          transform: 'perspective(800px) rotateY('+ $scope.acceleration.x +'deg)' + 'rotateX('+ $scope.acceleration.y +'deg)'  
          // 'rotateX('+ $scope.acceleration.x +'deg)' +'rotateZ('+ $scope.acceleration.z +'deg)'


Problem courtesy of: Matthew Harwood


What I noticed playing around with it is if I rotated a square around the Y axis, the side sticking out towards me would be "clickable," while the side pointed away would not be. Adding "z-index: 1" to one of the container divs (icon-wrapper or cube or wrap) seems to help.

Solution courtesy of: Mark Vayngrib


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.