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

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

两件事，首先正如您所说，您不能只将其设置为数字，而是需要将其设置为字符串，此处使用template literal。其次，由于您希望将旋转链接到滑块，因此在这种情况下，您需要向滑块添加一个侦听器，以侦听提供最直接反馈的 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-origin（参见示例）。

为滑块的输入事件添加一个监听器，否则该值只会在脚本加载时应用一次。最好将template literals 与反引号（`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>