Щелкните меньшую область после поворота Y

У меня есть очень простой случай

http://codepen.io/destroy90210/pen/misyj

HTML

<body>
  <div class="below"></div>
  <div class="top"></div>
</body>

CSS

html, body
  height: 100%
  width: 100%

body
  perspective: 3000px

.below
  height: 100%
  width: 100%
  background-color: #000
  position: absolute


.top
  background-color: #ff0000
  position: absolute
  top: 10em
  left: 10em
  width: 200px
  height: 200px
  transform-origin: 80% 0%
  transform: rotateY(-50deg)

JS

  $(".below").on("click", function(){
    console.log("below")
  })

  $(".top").on("click", function(){
   console.log("top")
  })

если вы нажмете на красную (.top) фигуру, вы увидите, что щелчок мышью.

только если вы нажмете 10-20px справа на красной фигуре,.top clickkevent будет запущен

кто-нибудь знает почему? и как я могу это исправить?

Я проверил это в версии Chrome 28.0.1500.72 м

в Firefox область щелчка больше на красной форме. он просто запускает неправильное событие, если щелкнуть в самой левой части красной фигуры.

Источник

0 ответов

Другие вопросы по тегам