Question

请查看我的实时代码::

CODE PEN

除非translate: rotate()

，否则CSS3 rotations == 0会使元素无法点击

我正在使用accelorameter在轴上移动元素。不幸的是，当它们的旋转不在（0,0,0）时，这些元素变得不可点燃。 如何解决此问题，以便始终可以点击所有元素？

 <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

我注意到的是，如果我围绕Y轴旋转一个正方形，那么向我伸出的一侧将是可点击的，＆＃34;虽然侧面指出不会。添加＆＃34; z-index：1＆＃34;其中一个容器div（icon-wrapper或cube或wrap）似乎有所帮助。

如何防止CSS元素转换为make元素不可点击

CODE PEN

1 个答案: