将元素旋转给定的量

Question

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

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

Answer 1

是否将rad形式转换为deg？您可以使用css变量和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">

Answer 2

如果您想动态地(例如通过文本输入(执行此操作，则需要使用JavaScript和内联样式。

这里有一个快速的例子：

$("#deg").on("input", () => {
const val = $("#deg").val();

$("#test").css("transform", `rotateZ(${val}deg)`);
});

#test {
background-color: red;
width: 100px;
height: 100px;
position: absolute;
left: 50px; top: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Input the degrees of rotation</label>
<input id="deg" type="number" value="0" min="0" max="360"/>
<div id="test"></div>