photoClip双击为旋转图片，如何修改成点击按钮旋转图片

旋转图片实现方式

• 使用CSS3 transform属性：通过CSS3的transform: rotate()方法实现图片旋转。7
• JavaScript添加点击事件：为按钮添加点击事件，每次点击时改变图片的旋转角度。8

具体实现步骤

1. 定义旋转角度变量：初始化一个变量来存储当前的旋转角度。
2. 绑定点击事件：为按钮绑定点击事件，每次点击时更新旋转角度。
3. 应用旋转效果：使用CSS的transform属性将旋转角度应用到图片上。

var angle = 0; // 初始化旋转角度

function rotateImage() {
    angle += 90; // 每次点击增加90度
    var newAngle = angle % 360; // 确保角度在0-360度之间
    document.getElementById('image').style.transform = 'rotate(' + newAngle + 'deg)';
}

// 为按钮添加点击事件
document.getElementById('rotateButton').addEventListener('click', rotateImage);

注意事项

• 图片中心点：CSS3的transform: rotate()是以图片中心点为旋转中心的，确保图片在容器内适应宽高。7
• 角度循环：通过取模操作确保旋转角度始终在0-360度之间。8