在纯 CSS 中计算旋转角度答案

【问题标题】：Calculate Angle for Rotation in Pure CSS在纯 CSS 中计算旋转角度
【发布时间】：2021-10-15 16:48:49
【问题描述】：

我想使用 CSS 动画沿线性路径移动 SVG，并将 SVG 与该路径对齐。参考下图，路径显示为红线，我想在 vh 的倍数中指定 h，在 vw 的倍数中指定 w，例如h = 30vh, w = 60vw，然后计算角度 α 用于旋转显示为蓝色三角形的 SVG。

当然，这应该是响应式的并且可以使用不同的窗口大小。我希望用纯 CSS 来完成这一切。

根据tan(α) = w/h，我可以使用arcus tangens 函数从商w/h 计算角度α。由于三角函数在 CSS yet 中不可用，我可以使用级数近似来计算角度，如 here 所示。但实际显示停止器似乎是商w/h 的计算，因为 CSS 中的除法要求分母是无单位的。所以，60vw / 30vh 是不允许的。

在 CSS 中是否有不同的方法来计算或设置角度？还是我必须在这里退回到 JavaScript 解决方案？

编辑：这是一个最小的可重现示例。为了在第一个关键帧中设置旋转，需要实际角度α。目前固定为rotate(0deg)，因此三角形始终指向上方，而不是指向线性路径的方向。

body {
  overflow: hidden;
}

main {
  color: black;
  background-color: #8dbdff;
}

svg#example {
  position: absolute;
  top: 0%;
  left: 0%;
  transform: translate(-100%, -100%);
  width: 30px;
  height: 30px;
  animation: linear-motion 3.0s linear infinite;
}

@keyframes linear-motion {
  0% {
    transform: translate(0, 30vh) translateX(-100%) rotate(0deg);
  }
  100% {
    transform: translate(60vw, 0vh) translateY(-100%);
  }
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<main class="container-fluid d-flex align-items-center min-vh-100">
  <svg id="example" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100" viewBox="0 0 100 100">
    <path fill="#008aff" d="M 50,5 95,97.5 5,97.5 z"/>
  </svg>
</main>

【问题讨论】：

可以稍微修改需求以使用 min 吗？感谢您提供近似三角函数的指针，我以前没见过。
你有更多的尝试代码吗？
我现在添加了一个最小的可重现示例，它显示了没有正确旋转 SVG 的动画。 @A Haworth：修改为使用 min 到底是什么意思？
@A Haworth：我想我现在明白你的意思了。我可以使用 vmin 代替 vh 和 vw。这将允许预先计算角度，因为商将保持不变。这绝对是一个选择，谢谢你的想法！唯一的缺点是覆盖整个屏幕需要一些额外的措施。

标签： css math rotation css-animations css-transforms

【解决方案1】：

根据 A Haworth 的评论，我终于使用vmin 来创建具有固定比例的动画。然后可以使用该比率来预先计算角度，如下面的 sn-p 所示。

此解决方案有一些限制，但响应速度快，适用于不同的窗口大小。

body {
  overflow: hidden;
}

main {
  color: black;
  background-color: #8dbdff;
}

svg#example {
  position: absolute;
  top: 0%;
  left: 0%;
  transform: translate(-100%, -100%);
  width: 30px;
  height: 30px;
  animation: linear-motion 3.0s linear infinite;
}

@keyframes linear-motion {
  0% {
    transform: translate(-100%, 40vmin) rotate(66.03deg);
  }
  100% {
    transform: translate(90vmin, -100%) rotate(66.03deg);
  }
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<main class="container-fluid d-flex align-items-center min-vh-100">
  <svg id="example" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100" viewBox="0 0 100 100">
    <path fill="#008aff" d="M 50,5 95,97.5 5,97.5 z"/>
  </svg>
</main>

【讨论】：