Angular 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>

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

Angular 4 - rotate image in 45deg steps

css

image

rotation

degrees

angular