如何防止CSS3转换使元素不可点击

Question

Please look at my live code ::

CODE PEN

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="toggle.menu()">
          <p>x: {{acceleration.x }}</p>
          <p>y: {{acceleration.y}}</p>
          <p>z: {{acceleration.z}}</p>
        </div>
      </div>
    </div>

  </div>
</div>

CSS:

 html, body, .page-container {
  box-sizing: border-box;
  height: 100%;
  padding:0;
  margin:0;
}
*, *: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(http://placekitten.com/1600/1080);
  background-size: cover;
  padding: 30px;

  @extend .group;

}



.icon-wrapper {

  @extend .group;
}
.fill {
   @extend .group;
   height: 100%;
   width: 100%;
   position: relative;
   top:0;
   left:0;
   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;

    -webkit-transform:translateZ(1px);

}

JS:

$scope.navigation = {
  status: false
};

$scope.toggle = {
  menu: function() {
    $scope.navigation.status = !$scope.navigation.status;
    console.log($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)'
        };

        $scope.$digest();

      };
    }

Answer 1

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.