Chrome（webkit？）rotateX 使光标不改变

Question

我正在尝试使用 CSS 属性“变换”来旋转图像。 这是我的代码： 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 进行测试）。

我希望我的解释清楚。如果你不明白，我建议你点击其中一张图片，注意光标在这张图片上到处可见，然后更改“范围”输入值，回到图片上，注意光标出现了只在图像的一半上，而不是另一半。

有人知道为什么会这样吗？我尝试使用“-webkit-transform”，但问题仍然存在。

提前致谢。 :)

Answer 1

可选择的类与包含它的 div 位于同一 z 平面中。

旋转的时候，一半在div上面，另一半在div下面。 div 下的一半不会改变光标，因为光标下的是 div 而不是 selectable。

要解决它，让它保持在父 div 之上（带有 translateZ）

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

顺便说一句，你不需要你的 rotateY(0deg)

updated demo