如果你想了解如何讓你的網站更加有吸引力，那么對于網頁設計來說，添加旋轉效果是一種很棒的方式。

我們可以通過CSS中的transform和transition屬性實現這種效果。首先，我們需要在HTML中添加一個圖片，并為其添加樣式。

<div class="image-container">
<img src="example.jpg">
</div>
.image-container {
/* 設置容器寬度和高度 */
width: 500px;
height: 500px;
/* 居中容器 */
margin: auto;
position: relative;
}
.image-container img {
/* 設置圖片的寬度和高度 */
width: 300px;
height: 300px;
/* 設置圖片位置 */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
/* 設置圖片的過渡效果 */
transition: transform 1.5s ease;
/* 設置圖片的初始角度 */
transform: rotate(0deg);
}

現在我們需要編寫一個CSS動畫來讓圖片旋轉。我們可以將動畫分為兩個階段：首先，圖片將緩慢旋轉到45度角，然后再旋轉到360度角。我們可以使用@keyframes規則來表示動畫。

.image-container img:hover {
/* 啟用動畫 */
animation: rotate-image 1s ease-in-out forwards;
}
@keyframes rotate-image {
0% {
/* 圖片從0度開始旋轉 */
transform: rotate(0deg);
}
50% {
/* 圖片旋轉到45度 */
transform: rotate(45deg);
}
100% {
/* 圖片旋轉一圈 */
transform: rotate(360deg);
}
}

現在當用戶將鼠標懸停在圖片上時，圖片將緩慢旋轉到一個角度，然后再以適當的速度完成一圈旋轉，并以指定的角度停止旋轉。

使用CSS使圖片旋轉并不難，下次你想要為你的網站添加這種有趣的效果時，記得使用這個簡單的方法。