CSS3相冊傾斜是一種非常酷炫的設(shè)計(jì)效果，可以使網(wǎng)頁變得更加生動(dòng)有趣。想要實(shí)現(xiàn)這種效果需要用到一些CSS3技巧。

.album {
perspective: 1000px;
transform-style: preserve-3d;
display: flex;
flex-wrap: wrap;
}
.album .photo {
position: relative;
width: 300px;
height: 200px;
margin: 20px;
transition: transform 0.5s;
transform: rotateY(0deg);
}
.album .photo:hover {
transform: rotateY(45deg);
}
.album .photo .caption {
position: absolute;
bottom: 0;
color: white;
background-color: rgba(0, 0, 0, 0.8);
width: 100%;
padding: 10px;
}

上面的代碼中，.album代表相冊容器，它的perspective屬性設(shè)置了視距長度，transform-style屬性設(shè)置了相對定位元素的變形效果。.photo代表相片元素，position屬性設(shè)置了相對定位，width和height屬性設(shè)置了寬度和高度，margin屬性設(shè)置了相片元素之間的間距，transition屬性定義了鼠標(biāo)懸浮時(shí)的過渡效果，transform屬性則定義了元素的旋轉(zhuǎn)角度，rotateY是繞Y軸旋轉(zhuǎn)的意思。.caption代表相片的標(biāo)題，它的position屬性設(shè)置了相對定位，bottom屬性設(shè)置了距離底部的距離，color屬性設(shè)置了字體顏色，background-color屬性設(shè)置了相片標(biāo)題的背景色，padding屬性設(shè)置了內(nèi)邊距。

通過上述代碼，我們能夠輕松實(shí)現(xiàn)CSS3相冊傾斜的效果，為網(wǎng)頁帶來更多精彩。