HTML5是目前使用最廣泛的網頁設計語言之一。在HTML5中，可以通過代碼設置圖片旋轉效果，使網頁更加生動有趣。下面將介紹如何通過HTML5設置圖片旋轉效果。
首先，我們需要在HTML代碼中引入相應的CSS文件。在```head```標簽中加入以下代碼：
```html```
接著，我們需要對圖片的樣式進行設置。在style.css中添加以下代碼：
```css
.rotate {
-webkit-animation: spin 2s linear infinite;
-moz-animation: spin 2s linear infinite;
-o-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
```
以上代碼實現了對圖片的旋轉效果，通過設置關鍵幀```keyframes```來實現。其中，```rotate```是通過CSS的```transform```屬性實現旋轉。```animation```是CSS3中新添加的動畫屬性，它可以對某一元素進行動態效果設計。
最后，在HTML中，我們需要通過```img```標簽來引入圖片，并為其添加```class="rotate"```屬性。如下：
```html
上一篇html5設置圖片為透明
下一篇html5設置圖標顏色