CSS圖片旋轉和定位是Web開發中常用的效果。但是有時候會遇到圖片旋轉時位置發生跑動的問題，這可能是因為旋轉對元素的盒模型產生影響，下面將介紹如何避免這個問題。

img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.rotate-img {
transform: rotate(30deg);
}

如上所示，我們首先對圖片進行了居中定位，然后對要旋轉的圖片設置了transform: rotate(30deg);。這時你會發現圖片旋轉后位置發生了跑動，這是因為旋轉改變了元素的盒模型。

為了解決這個問題，我們可以使用一個父容器包裹要旋轉的圖片，然后對父容器進行定位。這樣圖片旋轉后位置不會跑動，因為旋轉只改變了子元素的盒模型，父容器的盒模型保持不變。

.parent {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.parent img {
transform: rotate(30deg);
}

如上所示，我們將要旋轉的圖片放在了一個父容器內，然后對父容器進行了定位。這樣圖片旋轉后位置就不會跑動了。

總之，CSS圖片旋轉和定位是Web開發中常用的效果，遇到位置跑動問題時，我們可以通過將圖片放在一個父容器內，然后對父容器進行定位來解決這個問題。