CSS3動畫中的自轉效果是一種非常炫酷的效果，可以使網站的視覺效果更為生動有趣。通過CSS3的transform屬性實現圖片或文字的自轉，可以給人一種旋轉的錯覺，增加頁面的活力。

/* CSS3自轉動畫實現 */
.box {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
-webkit-animation: rotate 5s linear infinite;
animation: rotate 5s linear infinite;
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

在上面的代碼中，我們首先定義了一個.red的div。通過使用border-radius屬性，將這個div轉為圓形，用紅色填充顏色。然后，在div的樣式中，我們添加了CSS3動畫。使用了-webkit-animation屬性以及animation屬性，并附上一個名叫“rotate”的動畫。該動畫設置為循環無限次。

接下來，我們定義了名為“rotate”的CSS3動畫，聲明了0%到100%范圍內的狀態變化。我們使用transform: rotate(n)屬性實現自轉效果，將0度到360度的旋轉角度應用到div元素里面。

最后，我們使用@keyframes聲明中設置的自轉動畫名稱，將其應用到之前定義好的div元素中。就可以實現一個炫酷的自轉效果了。