可以使用输入值旋转元素吗

Question

我想使用Input[type=range]来旋转id为outer的红色圆圈，我试图选择圆圈的样式，然后进行转换，这等于输入的值，但它必须在rotateZ()的括号之间，这是一个字符串。这是我的密码；

var value = document.getElementById("slider").value;
console.log(value);
document.getElementById("inner").style.transform = document.getElementById("slider").value;

body {
display:flex;
align-items:center;
justify-content:center;
}
#outer {
background:red;
height:20vw;
position:relative;
border-radius:50%;
width:20vw;
display:flex;
justify-content:center;
}
#inner {
transform:translateY(10%);
border-bottom-left-radius:100%;
border-bottom-right-radius:100%;
position:absolute;
bottom:0;
background:darkgreen;
width:10%;
height:50%;
}

<div id="outer"><div id="inner"></div></div>
<input min="0" max="360" type="range" id="slider">

但它不起作用。我需要以某种方式把值放在括号之间。

编辑，解决方案

我使用了Temperate Literals，并将和｛｝之间的变量放在旋转的括号内，就像这个{variable}一样。

Answer 1

有两件事，首先，正如您所说，您不能只将其设置为数字，而是需要将其设置成字符串，在这里使用模板文字。其次，由于您希望旋转链接到滑块，因此需要在滑块中添加一个侦听器，在这种情况下，侦听input event，它可以提供最直接的反馈。

var slider = document.getElementById("slider");
slider.addEventListener('input', () => {
document.getElementById("outer").style.transform = `rotate(${slider.value}deg)`;
});

body {
display:flex;
align-items:center;
justify-content:center;
}
#outer {
background:red;
height:20vw;
position:relative;
border-radius:50%;
width:20vw;
display:flex;
justify-content:center;
}
#inner {
transform:translateY(10%);
border-bottom-left-radius:100%;
border-bottom-right-radius:100%;
position:absolute;
bottom:0;
background:darkgreen;
width:10%;
height:50%;
}

<div id="outer">
<div id="inner">
</div>
</div>
<input min="0" max="360" type="range" id="slider">

Answer 2

您需要提供一个符合CSS属性的字符串，例如rotateZ(180deg)。注意deg单元，因为没有它就无法工作。

如果你想同时平移手，你也需要把它放进字符串中，因为只有一个transform属性，你会覆盖它。这里的顺序很重要：首先旋转，然后平移，否则结果会改变。不要忘记，您还需要移动transform-origin(参见示例(。

向滑块的输入事件添加一个侦听器，否则该值将仅在脚本加载时应用一次。最好使用带有倒勾号的模板文字(`rotateZ(${value}) translate(10%)`(，因为它更方便，但也可以将字符串添加在一起('rotateZ(' + value + 'deg) translate(10%)'(。

编辑：或者，您可以像另一个答案中那样旋转外圈，这样可以节省translate的费用。然而，如果你也想在圆圈上添加一些类似时钟的数字，那么在这种情况下，它们也会被旋转。

var slider = document.getElementById("slider"),
hand = document.getElementById("inner");
slider.addEventListener('input', function() {
hand.style.transform = `rotateZ(${this.value}deg) translateY(10%)`;
});

body {
display:flex;
align-items:center;
justify-content:center;
}
#outer {
background:red;
height:20vw;
position:relative;
border-radius:50%;
width:20vw;
display:flex;
justify-content:center;
}
#inner {
transform: rotateZ(180deg) translateY(10%);
transform-origin: top center;
border-bottom-left-radius:100%;
border-bottom-right-radius:100%;
position:absolute;
bottom:0;
background:darkgreen;
width:10%;
height:50%;
}

<div id="outer"><div id="inner"></div></div>
<input min="0" max="360" type="range" id="slider">

Answer 3

const inputValue = document.querySelector('#slider')
const inner = document.querySelector('.inner')
const rotate = document.querySelector('.rotate')
var root = document.querySelector(':root');
let oldVariable = 0
// Listen to any change in the progress bar
inputValue.addEventListener("change", function(){
const newVariable = inputValue.value
root.style.setProperty('--my-start-deg',`${oldVariable}deg`);
root.style.setProperty('--my-end-deg', `${newVariable}deg`);
inner.classList.remove("rotate");
// Reset CSS Keyframes
void inner.offsetWidth;

inner.classList.add("rotate");
oldVariable = inputValue.value;
});

:root {
--my-start-deg: 0deg;
--my-end-deg: 0deg;
}
#frame{
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding: 10px;
border:10px solid #000;
border-radius:100%;
top:50%;
left:50%;
transform:translate(-50%);
transiton:all 3s;
}
.inner{
position: absolute;
top:50%;
left:50%;
transform:translate(-50%);
height:100px;
width:2px;
border-radius:50%;
background-color: red;
}
.rotate {
transform: rotate(0deg);
transform-origin: 0% 0%;
animation: progressBar 3s;
animation-fill-mode:forwards;
transiton:all 3s;

}

@keyframes progressBar {
0% {  transform: rotate(var(--my-start-deg)); }
100% {  transform: rotate(var(--my-end-deg)); }
}

<input min="0" max="360" value="0" type="range" id="slider">
<div id="frame">
<div class="inner rotate"></div>
</div>