CSS-設置旋轉元素的top / left屬性

Question

考慮我有一個相對/絕對定位的div，並帶有一個transform: rotate屬性。 更改此div的top / left屬性如何影響其在屏幕上的位置？ 在我創建的一個小型演示中，嘗試移動div時，通過更改其top / left屬性，它不會按預期移動。 例如，在下面的演示中，我有一個相對定位的div，它旋轉了45度，最初位於（300px，300px）。 嘗試將該div移動（5px，5px）時，該div實際上會向后移動...為什么呢？

這是演示- 演示 （單擊紅色方塊以將其在每個方向上移動5px）

謝謝！

Answer 1

問題是position試圖包含諸如margin ， position等之類的東西（也許它也使用rotate來計算position ）。 因此，請使用+=number代替position 。 例如：

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

這按預期工作。

http://jsfiddle.net/KyD7x/

Answer 2

針對預期行為更新了代碼。 請參考這支筆

$(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');
    });
});