切换transform-origin时保持元素旋转位置的实现方案

嘿，我来帮你搞定这个问题～ 你现在遇到的核心问题是：当切换transform-origin时，元素的旋转基准点变了，导致整个元素的位置会突然跳变，因为旋转是基于新的原点重新计算的，所以你想要保持的左侧位置自然就跑掉了。

我给你准备了几个实用的方案，你可以根据自己的需求和浏览器兼容要求来选：

方案一：纯CSS位移补偿（现代浏览器友好） #

这个方案用CSS变量和三角函数（现在主流浏览器都支持啦），自动计算需要补偿的位移，让左侧位置完全固定，而且过渡动画会很平滑。

你只需要修改你的CSS代码就行：

.bigBox {
  --box-width: 70vw; /* 和父容器宽度保持一致 */
  --rotate-angle: 10deg; /* 你的旋转角度 */
  /* 计算旋转后左侧需要补偿的垂直偏移量 */
  --offset-y: calc(var(--box-width) * sin(var(--rotate-angle)));
  
  border: solid 1px red;
  height: 80vh;
  width: var(--box-width);
  position: relative;
}

.rotatedBox {
  border: solid 1px greenyellow;
  background-color: teal;
  height: 10px;
  position: absolute;
  bottom: 0;
  width: 100%;
  transition: all 0.2s ease-in-out; /* 把transform-origin改成all，让所有属性都过渡 */
}

.rotatedBox.left {
  transform-origin: 100% 50%;
  transform: rotate(var(--rotate-angle));
}

.rotatedBox.right {
  transform-origin: 0% 50%;
  /* 向上偏移补偿量，让左侧位置和left状态完全一致，这里我设成水平状态，如果你要旋转-10deg就把rotate(0deg)改成rotate(-10deg) */
  transform: translateY(calc(-1 * var(--offset-y))) rotate(0deg);
}

这样切换的时候，元素会自动补上位移差，左侧位置纹丝不动，过渡也很自然～

方案二：JS动态计算补偿（兼容旧浏览器） #

如果你的项目需要兼容不支持CSS三角函数的旧浏览器，那用JS动态计算位置就很合适。我们先记录切换前左侧的位置，切换类之后再调整位移，把位置拉回来。

修改后的JS代码：

function rotate(direction) {
  const rotatedBox = document.querySelector(".rotatedBox");
  // 先记录当前左侧相对于父容器的垂直位置
  const parentRect = rotatedBox.parentElement.getBoundingClientRect();
  const currentRect = rotatedBox.getBoundingClientRect();
  const relativeLeftTop = currentRect.top - parentRect.top;

  if (direction === "right") {
    rotatedBox.classList.remove("left");
    rotatedBox.classList.add("right");
    // 等浏览器更新DOM后，计算需要补偿的位移
    requestAnimationFrame(() => {
      const newRect = rotatedBox.getBoundingClientRect();
      const offset = relativeLeftTop - (newRect.top - parentRect.top);
      // 设置位移和旋转，这里我设成水平，要转-10deg就改rotate的参数
      rotatedBox.style.transform = `translateY(${offset}px) rotate(0deg)`;
    });
  } else if (direction === "left") {
    rotatedBox.classList.remove("right");
    rotatedBox.classList.add("left");
    // 重置自定义的transform，回到left状态的默认旋转
    rotatedBox.style.transform = "";
  }
}

对应的CSS可以简化一下：

.rotatedBox {
  border: solid 1px greenyellow;
  background-color: teal;
  height: 10px;
  position: absolute;
  bottom: 0;
  width: 100%;
  transition: all 0.2s ease-in-out;
}

.rotatedBox.left {
  transform-origin: 100% 50%;
  transform: rotate(10deg);
}

.rotatedBox.right {
  transform-origin: 0% 50%;
}

方案三：嵌套元素分离位置与旋转 #

这个方案逻辑最直观：用一个外层盒子固定住你要保持的左侧位置，让内层盒子专门负责旋转。这样不管内层怎么改旋转原点，外层的位置都不会变，自然就不会跳了。

先改HTML，加个内层盒子：

<button onclick="rotate('left')">left</button>
<button onclick="rotate('right')">right</button>
<div class="bigBox">
  <div class="rotatedBox">
    <div class="innerBox"></div>
  </div>
</div>

然后是CSS：

.bigBox {
  border: solid 1px red;
  height: 80vh;
  width: 70vw;
  position: relative;
}

.rotatedBox {
  /* 外层盒子固定左侧在父容器左下角 */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
}

.innerBox {
  /* 内层盒子负责旋转和样式 */
  border: solid 1px greenyellow;
  background-color: teal;
  height: 100%;
  width: 100%;
  transition: all 0.2s ease-in-out;
}

.innerBox.left {
  transform-origin: 100% 50%;
  transform: rotate(10deg);
}

.innerBox.right {
  transform-origin: 0% 50%;
  transform: rotate(0deg); /* 同样，要转-10deg就改这里 */
}

最后改一下JS，操作内层盒子：

function rotate(direction) {
  const innerBox = document.querySelector(".innerBox");
  if (direction === "right") {
    innerBox.classList.remove("left");
    innerBox.classList.add("right");
  } else if (direction === "left") {
    innerBox.classList.remove("right");
    innerBox.classList.add("left");
  }
}

这个方案的好处是逻辑简单，不需要计算偏移，完全靠嵌套结构来隔离位置和旋转的影响，新手也能快速理解～

你可以根据自己的项目情况选一个最顺手的方案，亲测都能解决你说的“切换时保持左侧位置”的需求哦！

备注：内容来源于stack exchange，提问作者FakeEmpire