CSS實現電子相冊

相冊是展示照片的一種方式，而電子相冊更是讓你的相片展示更加具有個性化。通過使用CSS技術，我們可以為電子相冊增加一些特別的效果和功能。

首先，我們可以通過CSS的transform屬性讓相片具有旋轉和縮放效果。

img:hover {
transform: rotate(10deg) scale(1.2);
}

上述代碼表示當鼠標懸停在圖片上時，圖片會以10度的角度旋轉，并且縮放1.2倍。

其次，為了讓相冊更加美觀，我們可以使用CSS的transition屬性實現漸變效果。

img {
transition: all 0.3s ease;
}

代碼中的all表示所有屬性都會發生過渡效果，0.3s表示過渡的持續時間，ease表示過渡的速度曲線。

最后，為了方便瀏覽相冊，我們可以通過CSS的grid屬性實現圖片的布局。

#photo {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

代碼中的auto-fit表示根據容器大小自動調整圖片數量，minmax(250px, 1fr)表示圖片的寬度最小為250像素，最大為容器剩余的空間。通過這些設置，圖片的布局將更加合理和統一。

通過這些CSS技術的應用，我們可以讓電子相冊更具個性化和吸引力。