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

【问题标题】：CSS - Setting the top/left properties of a rotated elementCSS - 设置旋转元素的顶部/左侧属性
【发布时间】：2014-07-21 07:38:30
【问题描述】：

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

这里是演示 - Demo（点击红色方块可以在每个方向移动 5px）

谢谢！

【问题讨论】：

它按预期移动，即使旋转，顶部仍然是顶部，它只是元素的顶部，而不一定是窗口的顶部，所以这不是你所期望的，但是它实际上很有意义。改为考虑转换原点。

标签： javascript jquery html css

【解决方案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/

【讨论】：

这行得通，因为原始代码出错了，因为.css('top') 和.position().top 不是一回事。 .css('top') 给出“未旋转”的距离，.position().top 给出旋转后的距离。
感谢您澄清这一点。

【解决方案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');
    });
});

【讨论】：