HTML照片墻是目前非常火爆的一種網頁設計，它使得網頁的美觀度和功能性都有了很大提升。其中，四張圖片旋轉的效果是很常見的，今天我就來分享一下這種效果的實現方法。

<div class="rotate">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
<img src="img4.jpg">
</div>
<style>
.rotate {
width: 400px;
height: 400px;
position: relative;
margin: 100px auto;
}
.rotate img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
animation: spin 20s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg) translateZ(0);
}
25% {
transform: rotate(-90deg) translateZ(0);
}
50% {
transform: rotate(-180deg) translateZ(0);
}
75% {
transform: rotate(-270deg) translateZ(0);
}
100% {
transform: rotate(-360deg) translateZ(0);
}
}
</style>

代碼說明：

首先，我們要在HTML中定義一個容器`div`，這個容器的類名為`rotate`。然后，在這個容器中，我們需要添加四張圖片，我們可以使用`img`標簽來添加。在`img`標簽中，我們需要增加`src`屬性，指定圖片的路徑。

接下來，我們需要定義CSS樣式。首先，我們定義`rotate`類的寬度和高度，并將它設為相對定位，以便于我們在定義`img`標簽的位置。我們還需要將容器居中顯示。

然后，我們定義`img`標簽的寬度和高度為100%，并將它們設置為絕對定位，以便于我們控制他們的位置。我們要讓這四張圖片頂在容器的頂部和左側，所以我們需要將它們的top和left屬性都設為0。我們還需要為它們添加一個旋轉的動畫效果，我們可以使用CSS的`animation`屬性來設置這個動畫。

在`@keyframes`中，我們定義了五個狀態，分別對應了不同的圖片旋轉程度。其中，`transform: rotate()`表示圖片的旋轉角度，負數表示逆時針旋轉。`translateZ()`表示圖片的位移，用于避免旋轉時的鋸齒現象。

最后，我們就可以在瀏覽器中預覽這個效果啦！