css - 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 测试过)。

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

有人知道为什么会这样吗？我尝试使用“-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