Chrome (webkit?) RotateX делает курсор не меняющимся

Question

Я пытаюсь повернуть изображение, используя свойство CSS «transform». Вот мой код: http://jsfiddle.net/Ucph5/4/

А вот часть (с помощью JQuery), что делает поворот:

$('#rotationX').change(function() { 
    var rotationX = $(this).val(); 
    for (index = 0; index < selectedElements.length; ++index) { 
     var selectedElement = $('#' + selectedElements[index]); 
     selectedElement.css('transform', 
      'rotateX(' + rotationX + 'deg) ' + 
      'rotateY(0deg) ' + 
      'rotateZ(0deg)'); 
    } 
}); 

Проблема заключается в том, что при выборе изображения (нажав на него), то используйте «диапазон» для поворота фактического изображения и, наконец, переместите мышь назад по изображению, курсор должен быть «курсором», как указано в моем CSS. Но оказывается, что только половина изображения показывает «курсор», другая половина, кажется, не считается частью изображения и отображает мышь в ее нормальном представлении.

Эта проблема не отображается в Firefox (я не тестировал ее с помощью Internet Explorer или Safari).

Я надеюсь, что в моих объяснениях будет ясно. Если вы не понимаете, я предлагаю вам щелкнуть по одному из изображений, заметить, что курсор отображается повсюду над этим изображением, затем измените входное значение «range», вернитесь по изображению и обратите внимание, что курсор появляется только на половине изображения, а не на другом.

Есть ли у кого-нибудь идеи, почему это происходит? Я попытался использовать «-webkit-transform», и у меня все еще есть проблема.

Заранее спасибо. :)

Answer 1

Выбираемый класс находится в той же плоскости z, что и содержащий его div.

Когда вы поворачиваете его, половина его находится над div, а другая половина находится под div. Половина, которая находится под div, не изменяет курсор, потому что это div, а не выбираемый, который находится под курсором.

Чтобы решить эту проблему, сделать его пребывание выше родительского DIV (с translateZ)

selectedElement.css('transform', 
      'translateZ(100px) ' + 
      'rotateX(' + rotationX + 'deg) '); 

Кстати, вам не нужна ваша rotateY (0deg)

updated demo