0

我正在尝试使用 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”，但仍然有问题。

提前致谢。:)

4

1 回答 1

1

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

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

为了解决这个问题，让它保持在父 div 之上（带有 translateZ）

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

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

更新的演示

于 2013-09-09T20:10:42.000 回答