js控制图片旋转角度

在JavaScript中控制图片旋转角度涉及到了HTML、CSS和JavaScript的基础知识。以下是对这个问题的详细解答：

基础概念

1. HTML中的<img>标签：用于在网页中嵌入图片。

2. CSS的transform属性：允许对元素应用2D或3D转换，包括旋转、缩放、移动或倾斜。

3. JavaScript：一种脚本语言，用于创建动态网页内容和交互。

类型与应用场景

类型：

固定角度旋转。
根据用户输入动态旋转。
响应式旋转（如鼠标悬停时旋转）。

应用场景：

图片库中的图片预览。
动画效果增强用户体验。
用户界面元素的设计。

示例代码

以下是一个简单的示例，展示如何使用JavaScript控制图片旋转角度：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Rotation</title>
<style>
  #rotatingImage {
    transition: transform 0.5s; /* 平滑过渡效果 */
  }
</style>
</head>
<body>

<img id="rotatingImage" src="path_to_your_image.jpg" alt="Sample Image">

<button onclick="rotateImage(90)">Rotate 90°</button>
<button onclick="rotateImage(-90)">Rotate -90°</button>

<script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

function rotateImage(degrees) {
  const img = document.getElementById('rotatingImage');
  const currentRotation = img.style.transform ? parseInt(img.style.transform.replace('rotate(', '').replace('deg)', '')) : 0;
  img.style.transform = `rotate(${currentRotation + degrees}deg)`;
}