HTML5可以讓我們輕松地為網站添加各種交互特效，其中一種非常常用的特效就是圖像中心旋轉。下面讓我們來看看如何使用HTML5實現這并將其應用到你的網站中。

.center-img {
position: relative;
display: inline-block;
transition: transform .3s ease-in-out;
}
.center-img img {
display: block;
margin: 0 auto;
}
.center-img:hover {
transform: rotate(360deg);
}

首先，我們需要給包含圖像的容器（或者是圖像本身）添加一個類名，比如“center-img”。

然后，我們需要為該容器添加CSS屬性來使圖像在水平方向上居中：

.center-img {
position: relative;
display: inline-block;
}
.center-img img {
display: block;
margin: 0 auto;
}

加了這些屬性之后，圖像就會在水平方向上居中。但是如果直接對該容器添加旋轉特效，圖像將繞其左上角旋轉。因此，我們需要將旋轉點移動到圖像中心。為此，我們需要給容器添加“position: relative”屬性，并將圖像的位置設置為絕對定位，如下所示：

.center-img {
position: relative;
display: inline-block;
}
.center-img img {
display: block;
margin: 0 auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

如上述代碼所示，我們將圖像的左上角位置定在了容器的中心。然后，我們再為該容器添加CSS過渡效果，以使旋轉更加平滑：

.center-img {
position: relative;
display: inline-block;
transition: transform .3s ease-in-out;
}
.center-img img {
display: block;
margin: 0 auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.center-img:hover {
transform: rotate(360deg);
}

最后，我們只需要為容器添加一個:hover偽類，使圖像在鼠標懸停時旋轉即可。希望這篇文章能夠幫助你在HTML5中為網站添加更多特效！