HTML5提供了許多有趣的功能，其中之一是能夠讓圖片自動旋轉。這種效果非常適合作為網站的裝飾，讓網站更加生動活潑。在本文中，我們將介紹如何使用HTML5讓圖片實現自旋轉動畫效果。
<!DOCTYPE html>
<html>
<head>
<title>圖片旋轉動畫</title>
<style>
#myImage {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
}
</style>
</head>
<body>
<img id="myImage" src="image.jpg">
<script>
var img = document.getElementById("myImage");
var angle = 0;
setInterval(function(){
angle += 3;
img.style.transform = "rotate("+angle+"deg)";
}, 50);
</script>
</body>
</html>在上面的代碼中，我們首先在頁面上添加了一個圖片，并設置了其位置和大小。接著在JavaScript代碼中，我們通過getElementById()方法獲取了這張圖片的元素節點，并定義了一個角度變量angle的初始值為0。然后使用setInterval()方法來實現每50毫秒重復執行一次的函數，函數中angle每次增加3度，并將變化的角度值通過style.transform屬性應用到圖片元素上，使其實現旋轉效果。
需要注意的是，為了讓圖片元素實現旋轉動畫，我們必須將其定位屬性設置為absolute或fixed，否則無法實現旋轉效果。
最后，我們需要替換代碼中的圖片路徑，將其改為我們自己的圖片路徑，即可實現圖片的自動旋轉動畫效果。