我正在尝试使用 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”,但问题仍然存在。
提前致谢。 :)
最佳答案
可选类与包含它的 div 在同一 z 平面中。
旋转时,一半在div上面,另一半在div下面。 div 下的那一半不会改变光标,因为它是 div 而不是光标下的 selectable。
为了解决它,让它保持在父 div 之上(使用 translateZ)
selectedElement.css('transform',
'translateZ(100px) ' +
'rotateX(' + rotationX + 'deg) ');
顺便说一下,你不需要你的 rotateY(0deg)
关于css - Chrome (webkit ?) rotateX 使光标不改变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18705468/