如何让旋转后的元素基于文档原坐标系进行平移？

问题 #

对已旋转的元素执行平移操作时，默认平移是基于旋转后的坐标系生效的。想要让平移基于文档原坐标系执行，该怎么处理？

示例场景：元素先旋转45度，之后沿原坐标系X轴平移100px，但实际会沿着旋转后的X轴移动，不符合预期。

解决思路 #

CSS的transform属性执行顺序是从右到左的——写在后面的变换会先执行。所以要让平移基于原坐标系，只需调换变换顺序：把translate放在rotate前面（先执行平移，再执行旋转），这样平移会基于初始文档坐标系生效，之后再应用旋转，就能得到预期效果。

修改后的代码示例 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="test"></div>

CSS #

#test {
  width: 200px;
  height: 100px;
  background-color: red;
  transform-origin: center;
}

JavaScript #

$(document).ready(() => {
  var tx = 0;
  var ty = 0;
  var ag = 0;
  var el = $('#test');

  setTimeout(() => {
    ag = 45;
    el.css('transform', 'rotate(' + ag + 'deg)');
  }, 1000);

  setTimeout(() => {
    tx = 100;
    ty = 0;
    // 调换变换顺序：先平移（基于原坐标系），再旋转
    el.css('transform', 'translate3d(' + tx + 'px, ' + ty + 'px, 0) rotate(' + ag + 'deg)');
  }, 2000);
});

原理说明 #

• 原代码中rotate(45deg) translate3d(100px,0,0)的执行顺序是：先基于旋转后的坐标系完成平移，再执行旋转，导致平移方向跟随旋转后的轴。
• 修改后的translate3d(100px,0,0) rotate(45deg)执行顺序是：先基于原坐标系完成平移，再对平移后的元素执行旋转，最终元素位置就是原坐标系下平移后的位置叠加旋转效果，符合需求。

内容的提问来源于stack exchange，提问作者Eric