在網站設計中，使用CSS可以為網站添加各種動畫效果，其中圖片水平旋轉動畫是一種常見的效果。通過CSS的transform屬性和transition屬性綜合運用，實現圖片水平旋轉動畫效果。

首先，在HTML中添加要實現動畫的圖片，可以使用img標簽，也可以使用背景圖片方式，實現如下：

<img src="example.jpg" alt="example">
// 或者
<div class="example"></div>
// CSS樣式
.example {
background-image: url(example.jpg);
background-size: 100% 100%;
}

接下來，可以通過CSS實現圖片旋轉的效果了。使用transform屬性可以啟動2D/3D轉換，而rotateY()函數可設定物品繞 y 軸旋轉角度從而實現水平旋轉動畫。代碼如下：

.example {
transform: rotateY(180deg);
}

但是，僅使用這個代碼還無法實現旋轉動畫，我們需要使用transition屬性設置旋轉過渡時間，從而使圖像旋轉更加平滑。代碼如下：

.example {
transform: rotateY(180deg);
transition: transform 1s ease-in-out;
}

其中，transition屬性中的“1s”表示過渡時間，可以根據需要調整；“ease-in-out”表示過渡方式，表示淡入淡出，使旋轉動畫更加平滑。

綜上所述，通過transform和transition屬性實現了圖片水平旋轉動畫效果。以上代碼可以自行調整圖片大小，位置和樣式，為網站添加更豐富多彩的動態效果。