html - 按给定的量旋转元素

Question

我想使用 { transform: rotate(given-data) } 旋转图标或图像等元素。

如何将 given-data 从 double 值转换为 deg 值，以及如何将该数据传递给 css 以在 中使用rotate() 函数？

Answer 1

您要将 rad 格式转换为 deg 格式吗？您可以使用 css variables 的组合和 calc做一些基本的数学运算并动态设置元素的变量。

在我的示例中，范围输入可以从 0 到 1 并乘以 360deg 以设置旋转。

let img = $("img");
let range = $("input");

range.on("input", () => {
  img.css("--rotation", range.val());
});

img {
  transform: rotate(calc(360deg * var(--rotation, 0)));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="range" min="0" max="1" value="0" step="any">
<br>
<img src="https://picsum.photos/128">