CSS旋轉基點圖片是一種常用的網頁設計技巧，可以實現藝術感十足的效果。下面我們來看一下如何使用CSS來實現這種效果。

.rotate-image {
position: relative;
display: inline-block;
}
.rotate-image img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.rotate-image:hover img {
transform-origin: center center;
transform: translate(-50%, -50%) rotate(45deg);
}

上面的代碼中，我們給圖片所在的容器設置了相對定位，并將圖片以絕對定位的方式居中顯示。然后在鼠標懸停時，通過CSS3的transform屬性實現旋轉效果。

需要注意的是，為了讓旋轉基點在圖片的中心，我們需要使用transform-origin屬性，并將值設置為center center。

此外，我們也可以根據需求調整rotate函數中的值來實現不同的旋轉角度。

最終的效果如下圖所示：