CSS是前端開發中必不可少的一部分，其中調整圖片的方向也是CSS眾多功能之一。以下是關于CSS如何調整圖片方向的詳細介紹：

.rotate-image {
/* 使圖片向右旋轉90度 */
transform: rotate(90deg);
}
.flip-image {
/* 使圖片水平翻轉 */
transform: scaleX(-1);
}
.vertical-flip-image {
/* 使圖片垂直翻轉 */
transform: scaleY(-1);
}
.rotate-and-flip-image {
/* 同時旋轉并翻轉圖片 */
transform: rotate(90deg) scaleX(-1) scaleY(-1);
}

代碼中的四個類名分別表示四種不同的圖片方向調整方式。其中，rotate-image類可以將圖片向右旋轉90度；flip-image類可以水平翻轉圖片；vertical-flip-image類可以垂直翻轉圖片；rotate-and-flip-image類則是既可以旋轉圖片，又可以翻轉圖片的復合效果。

需要注意的是，以上代碼塊只是示例，實際使用時應該將.rotate-image等類名替換成自己文檔中實際使用的類名。

在使用這些類名調整圖片方向時，可以將對應的類名添加到img標簽或包裹img標簽的容器元素上。例如：

<img src="example.jpg" class="rotate-image">

這樣就可以將example.jpg這張圖片旋轉90度，同樣的道理，將類名改為其他三種即可實現不同的效果。