CSS旋轉圖片是一個經常用到的效果，在網頁設計中實現動態效果時尤其常見，但是在旋轉過程中，圖片會出現模糊的情況，給用戶帶來不良的視覺效果。下面介紹一些原因和解決方案。

首先，旋轉圖片時出現偏移和模糊的原因是因為在旋轉過程中，像素點不是整數個，而CSS無法準確地處理非整數像素的圖像。因此，在 CSS 中旋轉圖片會導致圖片顯示出現鋸齒、偏移、模糊等現象。

解決方案有兩種，分別是使用 CSS 屬性

image-rendering: pixelated

和

transform-origin

。

第一個屬性

image-rendering: pixelated

可以通過像素網格渲染的方式呈現圖像，可以減少圖片過度模糊的現象。但是，這個屬性會導致圖片顯示像素較為明顯，不適合放大操作?？梢越Y合使用其他屬性調整像素的大小和模糊程度。

img{
transform: rotate(30deg);
image-rendering: pixelated;
}

第二個屬性是

transform-origin

，可以修正圖片旋轉時的偏移問題，實時地調整旋轉中心的位置。值得注意的是，當圖片被旋轉后，它的旋轉中心會改變，導致圖片的位置發生偏移，使用屬性可以解決這個問題。

img{
transform: rotate(30deg);
transform-origin: center center;
}

以上兩種方案都可以解決 CSS 旋轉圖片時出現的偏移和模糊問題。開發者可以根據自己的需求選擇適合的方案，為用戶提供更好的視覺效果。