Question

考虑我有一个相对/绝对定位的div，其上设置了transform: rotate属性。如何更改此div的顶部/左侧属性会影响其在屏幕上的位置？在我创建的一个小型演示中，看起来当试图移动该div时，通过更改其顶部/左侧属性，它不会按预期移动。例如，在下面的演示中，我有一个相对定位的div，旋转45度，最初位于（300px，300px）。当试图将此div移动（5px，5px）时，div实际上会向后移动......为什么会这样？

以下是演示 - Demo（点击红色方块，以便在每个方向上移动5px）

谢谢！

Answer 1

问题在于position尝试包含margin，position等内容（也许它还使用rotate来计算position）。因此，请使用position而不是+=number。例如：

$(document).ready(function() {
    $('.redSquare').on('click', function() {
        $('.redSquare').css('top', "+=5");
        $('.redSquare').css('left', "+=5");
    });
});

这可以按预期工作。

http://jsfiddle.net/KyD7x/

Answer 2

更新了预期行为的代码。请参阅此Pen

$(document).ready(function() {
    $('.redSquare').on('click', function() {
    $('.redSquare').css('top', parseInt($('.redSquare').css('top')) + 5 + 'px');
        $('.redSquare').css('left', parseInt($('.redSquare').css('left')) + 5 + 'px');
    });
});

CSS - 设置旋转元素的顶部/左侧属性

2 个答案: