设置旋转元素的上/左属性

CSS - Setting the top/left properties of a rotated element

本文关键字：属性 旋转 元素 设置      更新时间：2023-09-26

假设我有一个相对/绝对定位的div，上面设置了transform: rotate属性。改变这个div的上/左属性如何影响它在屏幕上的位置?在我创建的一个小演示中，当试图移动这个div时，通过改变它的top/left属性，它不会像预期的那样移动。例如，在下面的演示中，我有一个相对定位的div，旋转45度，初始位置为(300px, 300px)。当尝试移动这个div (5px, 5px)时，div实际上会向后移动…为什么呢?

这是演示-演示(点击红色方块，以便在每个方向移动5px)

谢谢!

问题是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/

为预期的行为更新了代码。请参考这支笔

$(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');
    });
});
相关文章：