CSS旋轉效果圖是一種在網頁設計中經常使用的技巧，其可以使圖片或秀逗元素呈現出旋轉效果，增強了頁面的視覺效果，使網頁更加生動。下面我們來看一下如何通過CSS實現旋轉效果圖。

.rotate {
width: 100px;
height: 100px;
background-color: #f5dada;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}

以上代碼中，rotate類是指定旋轉效果的元素的樣式，width和height為元素的寬高，background-color為背景顏色。-webkit-transform、-moz-transform、-o-transform、-ms-transform和transform屬性是CSS3中用于實現變形的屬性，其中rotate()用于指定旋轉的角度，這里設置為45度。

除了使用rotate()函數指定角度外，還可以通過設置X、Y、Z軸的坐標實現不同方向的旋轉效果。例如：

.rotate {
width: 100px;
height: 100px;
background-color: #f5dada;
-webkit-transform: rotateX(45deg);
-moz-transform: rotateX(45deg);
-o-transform: rotateX(45deg);
-ms-transform: rotateX(45deg);
transform: rotateX(45deg);
}

上例中的rotateX()函數表示繞X軸旋轉，同理，rotateY()和rotateZ()函數則表示繞Y軸和Z軸旋轉。

除了通過transform屬性來實現旋轉效果，還可以通過CSS3中其他的變形屬性來實現不同的效果，例如scale()函數可以實現縮放效果，translate()函數可以實現平移效果等。

總之，使用CSS實現旋轉效果是一種簡便而又有效的方法，可以使網頁設計更加生動、有趣，讓用戶對網頁留下更加深刻的印象。