如何不使用JavaScript，通过CSS实现元素随窗口宽度比例旋转？

你的问题核心在于：CSS calc() 在旧规范（Level 3）中不允许 <length> 单位相除得到无单位的 <number>，而你需要的「无单位数 × 角度」跨类型运算，依赖CSS Values and Units Level 4的新特性，部分旧浏览器不支持，导致原代码失效。以下是几种无需JavaScript的解决方案：

方案1：现代浏览器直接支持的简洁写法 #

利用CSS Level 4的单位运算能力（Chrome 111+、Firefox 108+、Safari 16.4+已支持），直接将视口宽度与基准宽度的比例转换为无单位数，再乘以目标角度：

.cube {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: salmon;
  /* 视口宽度/100px得到比例，再乘以15deg */
  transform: rotate(calc(15deg * (100vw / 100px)));
}

或者更直观的斜率写法（0.15deg对应每1px宽度变化）：

transform: rotate(calc(0.15deg * (100vw / 1px)));

方案2：兼容旧浏览器的连续变化方案 #

如果需要兼容不支持Level 4运算的浏览器，可以用@property定义无单位的自定义属性（Chrome 85+、Firefox 110+支持），明确变量类型后再进行运算：

/* 声明无单位的自定义属性 */
@property --width-ratio {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}

.cube {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: salmon;
  /* 计算视口宽度与100px的比例 */
  --width-ratio: calc(100vw / 100px);
  /* 用比例乘以角度实现旋转 */
  transform: rotate(calc(var(--width-ratio) * 15deg));
}

方案3：纯CSS Level 3兼容的阶梯式过渡 #

如果需要完全兼容所有支持calc()的旧浏览器（无需任何新特性），可以用媒体查询结合calc()实现阶梯式的连续旋转效果：

.cube {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: salmon;
  /* 默认状态：窗口宽度≤100px时旋转15deg */
  transform: rotate(15deg);
}

/* 窗口宽度在100px~200px之间时，线性过渡旋转角度 */
@media (min-width: 100px) and (max-width: 200px) {
  .cube {
    transform: rotate(calc(15deg + 15deg * ((100vw - 100px) / (200px - 100px))));
  }
}

/* 窗口宽度≥200px时，固定旋转30deg */
@media (min-width: 200px) {
  .cube {
    transform: rotate(30deg);
  }
}

这个写法通过同类型单位的运算（长度差除以长度差得到无单位比例），在所有支持calc()的浏览器中都能生效，完美兼容旧环境。

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