角度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转换属性。

＆＃13;

＆＃13;

dataGridView1.Rows[1].Cells["actionColumn"].Value = "firstLine\n\nsecondLine"

＆＃13;

let rotationAmount = 0;

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

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;