角度4-以45度为步长旋转图像

Question

我有图像和两个按钮，应将图像旋转45或-45度。

<div>
    <img src="/assets/img1.png">
</div>
<div>
    <button type="submit">rotate left 45</button>
    <button type="submit">rotate right 45</button>
</div>

如何使将CSS转换应用到此图像的函数？步骤应采用45度以太方式，并且无论用户单击按钮多少次，它都应不断旋转。

Answer 1

您可以在单击时更新元素CSS转换属性。

let rotationAmount = 0;

function rotateImage(direction) {
  rotationAmount += direction == 'left' ? -45 : 45;
  
  document.querySelector('#image').style.transform = `rotate(${rotationAmount}deg)`;
}

#image {
  height: 100px;
  width: 100px;
}

.button-wrapper {
  margin-top: 30px;
}

<div>
    <img id="image" src="">
</div>
<div class="button-wrapper">
    <button type="submit" onclick="rotateImage('left')">rotate left 45</button>
    <button type="submit" onclick="rotateImage('right')">rotate right 45</button>
</div>