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而不是光标下的可选择。

要解决此问题，请将其保持在父div（使用translateZ）

之上

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

顺便说一下，你不需要你的rotateY（0deg）

updated demo

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

1 个答案: