CSS旋轉相冊是一種很炫酷的效果，通常是將照片放在一個圓環上并旋轉，但是這樣的布局不適合所有的情況。

有時候我們需要把照片呈現在一個單一的直線上而不是圓環。但是，如果我們直接使用之前的代碼，我們會得到一個圓環，而不是我們想要的效果。那么該怎么辦呢？

.photo-container{
width:100%;
display:flex;
justify-content:center;
align-items:center;
}
.photo{
width:100px;
height:100px;
margin:0 10px;
transform-origin: center center -50px;
transform:translateZ(50px) rotateY(calc(var(--i) * 60deg));
}

我們需要對代碼進行一些修改，使圖片均勻分布在一條直線上。方法是將旋轉軸放在圖像前面，而不是圖像中心。

我們需要將transform-origin設置為center center -50px，這將把旋轉軸移到圖像前面。然后使用translateZ將圖像移動到軸的位置，這個位置的距離要足夠長，以保證所有的圖片都在同一直線上，并且應該大于圖像的寬度。最后，我們使用rotateY旋轉圖片。

通過這些修改，我們可以得到一個非常酷的直線相冊效果，可以讓我們的網站更具創意和吸引力。