HTML 360° 旋转图片代码示例 - 实现图片自动旋转效果 - 常规

以下是一个基本的 360 度旋转图片的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
	<title>360° 旋转图片</title>
	<style>
		#image {
			width: 500px;
			height: 500px;
			background-image: url('image.jpg');
			background-size: cover;
			background-position: center;
			margin: 0 auto;
			transform-style: preserve-3d;
		}
	</style>
</head>
<body>
	<div id="image"></div>
	<script>
		var image = document.getElementById('image');
		var currentX = 0;

		function rotateImage() {
			currentX += 1;
			image.style.transform = 'rotateY(' + currentX + 'deg)';
			requestAnimationFrame(rotateImage);
		}

		requestAnimationFrame(rotateImage);
	</script>
</body>
</html>

在上述代码中，我们创建了一个 <div> 元素，它包含了我们要旋转的图片。我们使用 CSS 来设置该元素的大小、背景图片以及 3D 变换。我们使用 transform-style: preserve-3d 来保持元素的 3D 空间，以便我们可以在其中旋转图片。

我们使用 JavaScript 来实现旋转。我们定义了一个变量 currentX 来跟踪当前的旋转角度，并在每帧增加 1 度。我们使用 requestAnimationFrame() 函数来在浏览器的下一帧调用 rotateImage() 函数，以便我们可以动态地旋转图片。最后，我们在 rotateImage() 函数中使用 style.transform 来设置旋转的 CSS 属性，从而旋转图片。