如何在CSS中基于视口设置元素的transform-origin？

你需要让多个自动定位的元素以视口中心为变换原点进行变换，但默认的transform-origin是相对于元素自身的，且CSS无法动态获取元素的计算位置来调整变换原点，transform-box也不支持将视口作为参考系，同时不能通过包裹视口大小的父元素来间接实现。

目前纯CSS确实没有完美的解决方案，核心原因是：

• transform-origin的坐标值只能相对于元素自身的盒模型（如左上角、自身中心等），无法直接关联到视口坐标；
• CSS没有提供能获取元素计算位置（如top/left）的原生函数，无法通过calc()动态计算每个元素相对于视口中心的偏移量；
• transform-box仅支持与元素自身相关的参考系，不支持视口级别的参考。

既然纯CSS无法满足需求，用JS实现其实非常直接，只需要遍历目标元素，计算每个元素的位置与视口中心的偏移，动态设置transform-origin即可：

// 获取所有需要变换的目标元素
const targetElements = document.querySelectorAll('p');

function updateTransformOrigin() {
  const viewportCenterX = window.innerWidth / 2;
  const viewportCenterY = window.innerHeight / 2;

  targetElements.forEach(el => {
    const rect = el.getBoundingClientRect();
    // 计算视口中心相对于元素左上角的坐标（即transform-origin需要的数值）
    const originX = viewportCenterX - rect.left;
    const originY = viewportCenterY - rect.top;
    el.style.transformOrigin = `${originX}px ${originY}px`;
  });
}

// 初始化设置变换原点
updateTransformOrigin();
// 窗口大小变化时重新计算，保证适配
window.addEventListener('resize', updateTransformOrigin);

配合你原有的CSS即可生效：

p.transform {
  transform: scale(2);
}

这种方式完全不影响原有布局，也不需要额外父元素包裹，每个元素都会准确以视口中心为原点执行变换。

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