本文目錄導讀：

1. 使用CSS的transform屬性
2. 使用CSS的writing-mode屬性
3. 使用CSS的display屬性

CSS技巧：從豎版圖片到橫版的華麗轉(zhuǎn)身

在網(wǎng)頁設(shè)計中，我們時常需要應(yīng)對各種圖片排版需求，將豎版圖片轉(zhuǎn)換為橫版圖片，就是一種常見的需求，通過CSS，我們可以輕松實現(xiàn)這一轉(zhuǎn)換，下面，就讓我們一起來看看如何實現(xiàn)吧！

使用CSS的transform屬性

CSS的transform屬性可以幫助我們實現(xiàn)圖片的旋轉(zhuǎn)，通過設(shè)定transform:rotate(-90deg)，我們可以將圖片逆時針旋轉(zhuǎn)90度，從而實現(xiàn)從豎版到橫版的轉(zhuǎn)換。

使用CSS的writing-mode屬性

CSS的writing-mode屬性可以改變文本的書寫方向，當我們將writing-mode設(shè)置為horizontal-tb時，文本將從左到右水平書寫，這同樣適用于圖片，通過改變writing-mode屬性，我們可以將豎版圖片轉(zhuǎn)換為橫版圖片。

使用CSS的display屬性

CSS的display屬性也可以幫助我們實現(xiàn)圖片的排版需求，通過設(shè)定display:inline-block或display:block，我們可以控制圖片的大小和位置，結(jié)合transform和writing-mode屬性，我們可以輕松實現(xiàn)豎版圖片到橫版的轉(zhuǎn)換。

CSS提供了多種方法來實現(xiàn)豎版圖片到橫版的轉(zhuǎn)換，我們可以根據(jù)自己的需求和喜好選擇***適合的方法，希望這篇文章能對你有所幫助！