CSS圖片旋轉(zhuǎn)90度，輕松實現(xiàn)圖片方向調(diào)整

在網(wǎng)頁設(shè)計中，我們經(jīng)常需要調(diào)整圖片的方向，以滿足不同頁面布局的需求，將圖片旋轉(zhuǎn)90度是***常見的操作之一，如何使用CSS來實現(xiàn)圖片的旋轉(zhuǎn)呢？

我們需要給需要旋轉(zhuǎn)的圖片添加一個CSS樣式，在樣式中，我們可以使用transform屬性來實現(xiàn)圖片的旋轉(zhuǎn)，具體代碼如下：

img {
  transform: rotate(90deg);
}

上述代碼中，img表示需要旋轉(zhuǎn)的圖片，transform表示對圖片進(jìn)行變換操作，rotate表示將圖片旋轉(zhuǎn)90度，通過這種方式，我們就可以輕松實現(xiàn)圖片的旋轉(zhuǎn)操作了。

除了旋轉(zhuǎn)90度外，我們還可以根據(jù)需要旋轉(zhuǎn)不同的角度，如果需要旋轉(zhuǎn)180度，可以將代碼中的90度改為180度：

img {
  transform: rotate(180deg);
}

我們還可以使用transition屬性來添加過渡效果，使圖片旋轉(zhuǎn)更加平滑，具體代碼如下：

img {
  transform: rotate(90deg);
  transition: transform 2s;
}

上述代碼中，transition表示添加過渡效果，2s表示過渡時間為2秒，通過添加過渡效果，我們可以讓圖片旋轉(zhuǎn)更加自然、流暢。

使用CSS來實現(xiàn)圖片旋轉(zhuǎn)90度非常簡單，我們只需要給需要旋轉(zhuǎn)的圖片添加一個樣式，使用transform屬性即可，我們還可以根據(jù)需要旋轉(zhuǎn)不同的角度，并使用transition屬性來添加過渡效果，使圖片旋轉(zhuǎn)更加自然、流暢。