如何实现CSS动态旋转 让h1元素随页面缩放匹配中心斜线角度

你当前的斜线是白色三角形通过clip-path裁切出的斜边，两端固定在hero容器的右上角、左下角，倾斜角度完全由hero容器的宽高比决定，不需要写死固定角度值，以下是两种可直接落地的实现方式：

纯CSS实现（推荐） #

该方案无需任何JavaScript，依靠CSS原生三角函数动态计算角度，视口变化时自动更新，适配所有现代浏览器。

• 给hero容器定义尺寸变量和动态计算的倾斜角变量
• 两个标题直接引用该角度作为rotate值，同时把写死的固定px定位替换为相对单位，避免缩放错位
• 给标题加单行显示规则，防止窄屏换行破坏对齐效果

核心修改后的CSS代码：

.hero {
  border: 1px solid black;
  height: 90vh;
  width: 90vw;
  position: relative;
  background-color: black;
  /* 定义容器尺寸变量 */
  --hero-w: 90vw;
  --hero-h: 90vh;
  /* 动态计算斜边角度：斜边从右上延伸到左下，角度取负值 */
  --slant-angle: calc(-1 * atan(var(--hero-h) / var(--hero-w)));
}

.skyler-kroll__text {
  color: black;
  position: absolute;
  /* 引用动态计算的角度，替换原来写死的-40deg */
  rotate: var(--slant-angle);
  top: 42%;
  left: 32%;
  animation: moveInLeft 1s ease-out;
  /* 强制单行显示 */
  white-space: nowrap;
}

.web-developer__text {
  background: linear-gradient(to left, #38d39f, #38a4d3);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: absolute;
  /* 引用动态计算的角度 */
  rotate: var(--slant-angle);
  top: 52%;
  /* 替换原来写死的250px为相对单位 */
  left: 18vw;
  animation: moveInRight 1s ease-out;
  white-space: nowrap;
}

兼容性说明：CSS atan() 函数支持Chrome 111+、Firefox 108+、Safari 15.4+，覆盖全球95%以上的活跃用户，可直接用于生产环境。

旧浏览器兼容方案（JS辅助计算） #

如果需要兼容版本更老的浏览器，可以加一段轻量JS，监听视口尺寸变化实时计算角度，再赋值给CSS变量：

document.addEventListener('DOMContentLoaded', () => {
  const hero = document.querySelector('.hero');
  const updateAngle = () => {
    const w = hero.offsetWidth;
    const h = hero.offsetHeight;
    // 弧度转角度，方向取负匹配斜边倾斜方向
    const angle = -Math.atan(h / w) * (180 / Math.PI);
    hero.style.setProperty('--slant-angle', `${angle}deg`);
  }
  // 初始化计算一次
  updateAngle();
  // 视口尺寸变化时重新计算
  window.addEventListener('resize', updateAngle);
})

加完这段JS后，CSS部分和上面纯CSS方案写法完全一致，直接引用var(--slant-angle)即可，不需要修改其他样式逻辑。

原有代码小问题修复 #

• 原代码中rotate: calc(-40deg)的calc是冗余写法，直接写rotate: -40deg即可
• 定位属性不要用固定px值，替换为vw、百分比这类相对单位，避免缩放时位置偏移
• 原入场动画用transform: translateX()实现，和CSS独立rotate属性不会互相覆盖，不需要修改动画代码

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