请写一个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属性，从而旋转图片