css樣式做炫酷相冊

隨著圖片分享的時代發展，現代人對于相冊的要求越來越高，追求個性化、獨特化，于是炫酷相冊應運而生。在這篇文章中，我們將介紹如何使用CSS樣式制作炫酷相冊。

首先，我們需要用HTML構建一個基本的相冊框架，如下所示：

<div class="album">
<div class="photo">
<a href="#"><img src="photo1.jpg" alt="photo1"></a>
</div>
<div class="photo">
<a href="#"><img src="photo2.jpg" alt="photo2"></a>
</div>
<div class="photo">
<a href="#"><img src="photo3.jpg" alt="photo3"></a>
</div>
</div>

接下來，我們為相片添加CSS樣式。我們使用CSS3動畫效果，使得鼠標懸浮在圖片上時，圖片能夠旋轉90度，以突出顯示。下面是我們用的CSS樣式：

.album {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
}
.photo {
margin: 15px;
position: relative;
width: 250px;
height: 180px;
perspective: 1000px;
}
.photo img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s ease-in-out;
}
.photo:hover img {
transform: rotateY(90deg);
box-shadow: 0 15px 15px -5px rgba(0, 0, 0, 0.3);
}
.photo:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
backface-visibility: hidden;
transform-style: preserve-3d;
transform-origin: right;
transition: all 0.5s ease-in-out;
background: rgba(0, 0, 0, 0.6);
z-index: 1;
}
.photo:hover:before {
transform: rotateY(-90deg);
}
.photo a {
position: absolute;
width: 100%;
height: 100%;
}

我們可以看到，樣式定義了一個名為“album”的div容器，里面包含了三個class為“photo”的div容器，每個包含了一個鏈接和一個圖像。當我們鼠標懸停在圖像上時，樣式使它旋轉90度，同時彈出一個半透明背景層，以增加展示效果。

最后，讓我們再來看一下我們完成的炫酷相冊：