CSS3提供了許多新特性，其中鼠標懸停時旋轉元素是一個很酷的特效。CSS3 hover技術可以使元素在鼠標懸停時進行旋轉，非常適合在網頁設計中使用。

/* 鼠標懸停旋轉動畫 */
.rotate {
transition: transform 0.5s ease;
}
.rotate:hover {
transform: rotate(360deg);
}

這是一個非常基本的鼠標懸停旋轉動畫，當你將鼠標懸停在元素上時，它將以順時針方向旋轉360度。

通過調整CSS代碼，您可以更改旋轉角度或添加其他效果。下面是一個示例，其中元素在不同方向上旋轉，并且擁有不同的動畫效果:

/* 不同方向的懸停旋轉動畫 */
.rotate-up {
transform-origin: bottom;
}
.rotate-down {
transform-origin: top;
transform: rotate(180deg);
}
.rotate-left {
transform-origin: right;
transform: rotate(-90deg);
}
.rotate-right {
transform-origin: left;
transform: rotate(90deg);
}
/* 動畫效果 */
.zoom {
transition: transform ease 0.5s;
}
.fade {
transition: opacity ease 0.5s;
}
.rotate-slow {
transition: transform ease 2.5s;
}
.rotate-fast {
transition: transform ease 0.2s;
}

以上示例代碼包含幾個選擇器，每個選擇器都有不同的轉換原點，旋轉角度和過渡效果。可以將這些選擇器添加到您的CSS代碼中，以創建更好的網頁設計。