很多網(wǎng)頁(yè)設(shè)計(jì)中都需要使用到圖片旋轉(zhuǎn)效果，而CSS實(shí)現(xiàn)旋轉(zhuǎn)效果非常簡(jiǎn)單，只需要使用transform屬性即可。但是，一旦將圖片旋轉(zhuǎn)后，往往會(huì)出現(xiàn)圖片位置偏移的問(wèn)題，這時(shí)候就需要使用到定位屬性和偏移量進(jìn)行調(diào)整。

下面是一個(gè)簡(jiǎn)單的CSS圖片旋轉(zhuǎn)代碼：

img {
transform: rotate(45deg);
}

上述代碼可以將圖片旋轉(zhuǎn)45度，但是圖片位置會(huì)發(fā)生偏移。我們可以使用使用position屬性來(lái)為圖片設(shè)置定位，再通過(guò)top和left屬性來(lái)調(diào)整圖片的位置，代碼如下：

img {
position: relative;
left: 50%;
top: 50%;
transform: rotate(45deg);
}

上述代碼中，position屬性設(shè)置為relative，left和top屬性設(shè)置為50%，表示將圖片位置設(shè)置為相對(duì)于父元素水平和垂直居中。接下來(lái)，通過(guò)使用transform屬性進(jìn)行圖片旋轉(zhuǎn)，這時(shí)候我們可以發(fā)現(xiàn)圖片旋轉(zhuǎn)后位置仍然偏移。接著使用top和left屬性對(duì)圖片的位置進(jìn)行微調(diào)，來(lái)達(dá)到既能旋轉(zhuǎn)圖片又能保持位置的效果。

CSS圖片旋轉(zhuǎn)后調(diào)整位置就是這么簡(jiǎn)單，只需要使用position屬性和top、left屬性即可。值得注意的是，定位屬性和偏移量的數(shù)值需要適當(dāng)調(diào)整，以達(dá)到最佳的效果。