圖片跟隨著鼠標旋轉，是一種常見的互動效果，可以為網站增加一定的趣味性和吸引力。實現這個效果可以使用CSS3的transform屬性和JavaScript的事件監聽。

首先，我們需要在HTML文件中添加一個圖片元素，并設置其初始樣式。

<img src="image.jpg" class="rotate">

接下來，在CSS文件中定義.rotate類的樣式，其中transform-origin設置為圖片的中心點，transform-style設置為preserve-3d，表示元素子元素的變形也是動態的。

.rotate {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
transform-origin: center;
transform-style: preserve-3d;
}

然后，我們需要編寫JavaScript代碼，實現鼠標拖動時圖片跟隨鼠標旋轉的效果。在事件監聽中，通過計算鼠標在圖片上的位置和偏移量，控制圖片的旋轉角度。

var img = document.querySelector('.rotate');
var dragging = false;
var startX, startY;
img.addEventListener('mousedown', function(e){
e.preventDefault();
dragging = true;
startX = e.clientX;
startY = e.clientY;
});
img.addEventListener('mouseup', function(){
dragging = false;
});
img.addEventListener('mousemove', function(e){
if(dragging){
var deltaX = e.clientX - startX;
var deltaY = e.clientY - startY;
var angleX = deltaX * 0.2;
var angleY = -deltaY * 0.2;
img.style.transform = 'rotateX(' + angleY + 'deg) rotateY(' + angleX + 'deg)';
}
});

最后，圖片跟隨鼠標旋轉的效果就實現了。當用戶在圖片上拖動時，圖片會根據鼠標移動的方向跟隨旋轉，讓頁面增加了一份趣味和動感。