CSS圖片3是一種用于網頁設計的高級技術，它可以使圖片在網頁上實現動態效果，其中之一就是圖片的自動旋轉。下面我們來看看如何使用CSS圖片3實現圖片自動旋轉。

img {
-webkit-animation: rotate 5s linear infinite;
/* Safari 與 Chrome */
-moz-animation: rotate 5s linear infinite;
/* Firefox */
-o-animation: rotate 5s linear infinite;
/* Opera */
animation: rotate 5s linear infinite;
/* 所有瀏覽器 */
}
@-webkit-keyframes rotate /* Safari 與 Chrome */
{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotate /* Firefox */
{
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}
@-o-keyframes rotate /* Opera */
{
from {-o-transform: rotate(0deg);}
to {-o-transform: rotate(360deg);}
}
@keyframes rotate /* 所有瀏覽器 */
{
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}

上述代碼中，我們首先為圖片添加了一個CSS動畫屬性，它包括webkit、moz、o、animation四個前綴，以確保在不同的瀏覽器中都能正常運行。然后我們定義了一個關鍵幀動畫，使用了四個不同的前綴，也是為了兼容不同的瀏覽器。

在這個動畫中，我們從0度開始，到360度結束，整個過程需要5秒，速度為線性，旋轉無限循環。當我們運行這段代碼后，圖片就會自動旋轉起來。

需要注意的是，CSS圖片3雖然功能強大，但是不兼容一些舊版的瀏覽器，需要適當調整代碼，才能讓它在所有瀏覽器中都正常運行。