使用特定参数时CSS rotate()变换失效？求解决方案与原因

你遇到的问题不是浏览器Bug，而是对CSS规范的误解：CSS的rotate()函数不能直接使用atan2()这样的函数（早期浏览器完全不支持，现代浏览器需要正确语法），也无法直接将视口单位作为参数传入未被正确包裹的数学函数中。

• Firefox直接忽略了无效的transform规则，所以盒子完全不旋转；
• Chromium系浏览器是对无效CSS值做了容错处理，默认显示45度旋转，这并非符合规范的行为。

方法1：使用现代CSS数学函数（推荐，支持新浏览器） #

现代浏览器（Chrome 111+、Firefox 108+）已经支持CSS原生的atan2()和deg()函数，只需将弧度值转换为角度值即可：

html, body {
  margin: 0;
  padding: 0;
}

#oriented {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 0;
  left: 0;
  outline: solid black 2px;
  transform-origin: top left;
  /* 用deg()将atan2返回的弧度转换为角度，正确关联视口尺寸 */
  transform: rotate(deg(atan2(100vh, 100vw)));
}

方法2：JavaScript动态计算（兼容旧浏览器） #

如果需要兼容不支持CSS数学函数的旧浏览器，可以通过JS实时计算视口尺寸并更新旋转角度：

html, body {
  margin: 0;
  padding: 0;
}

#oriented {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 0;
  left: 0;
  outline: solid black 2px;
  transform-origin: top left;
}

<div id="oriented"></div>

function updateRotation() {
  const el = document.getElementById('oriented');
  const viewportHeight = window.innerHeight;
  const viewportWidth = window.innerWidth;
  // 计算弧度并转换为角度，atan2(y轴长度, x轴长度)
  const rotationAngle = Math.atan2(viewportHeight, viewportWidth) * (180 / Math.PI);
  el.style.transform = `rotate(${rotationAngle}deg)`;
}

// 初始化执行一次
updateRotation();
// 窗口大小变化时重新计算
window.addEventListener('resize', updateRotation);

原代码无效的核心原因：

1. rotate()要求参数是合法角度值，而atan2(100vh, 100vw)既没有被正确的CSS数学函数语法包裹，也没有将弧度转换为角度；
2. 视口单位vh/vw不能直接作为未受支持的函数参数使用，必须在CSS数学函数的规范语法下才能生效。

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