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

Question

我想用Input[type=range]旋转id为outer的红色圆圈，我试过select圆圈的样式，然后变形，结果等于输入，但它必须在 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. Secondly, since you want the rotation linked to the slider, you'll need to add a listener to the slider in this case listening for an 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（参见示例）。

为滑块的输入事件添加一个侦听器，否则该值只会在脚本加载时应用一次。最好使用带有反引号 (`rotateZ(${value}) translate(10%)`) 的 template literals，因为它更方便，但您也可以将字符串加在一起 ('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>

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

Can you rotate an element using a input value?

html

javascript

css

dom