CSS中可以通過transform屬性來對圖片進行旋轉變換。其中,順時針旋轉90度常常應用到展示橫向的圖片時,讓圖片轉為豎向展示。具體實現如下:
img { width: 200px; height: 100px; transform: rotate(90deg); }
上述代碼表示將圖片的寬度設置為200px,高度設置為100px,然后通過transform屬性將圖片按照順時針方向旋轉90度展示。需要注意的是,旋轉后原本圖片的寬度將對應變為高度,原本的高度對應變為寬度。
除此之外,還可以通過設置transform-origin屬性來控制圖片旋轉的中心點。默認情況下,中心點位于元素的中心,可以通過像素或百分比值來調整中心點位置。
img { width: 200px; height: 100px; transform: rotate(90deg); transform-origin: bottom right; }
以上代碼表示將中心點位置移到了圖片的右下角。
總之,通過CSS的transform屬性,可以輕松而便捷地對圖片進行各種旋轉變換,讓圖片展示更加靈活多樣。
上一篇mysql數據庫查詢篩選
下一篇mysql數據庫查詢級別