立體旋轉(zhuǎn)相冊是一種非常炫酷的圖片展示方式，css技術(shù)可以很好的實現(xiàn)這一效果。下面我們來學(xué)習(xí)一下如何使用css制作立體旋轉(zhuǎn)相冊。

.gallery{
perspective: 1000px;
perspective-origin: center;
transform-style: preserve-3d;
transition: transform 1s;
}
.gallery img{
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
transition: transform 1s;
}
.gallery img:first-child{
transform: rotateY(0);
}
.gallery img:nth-child(2){
transform: rotateY(60deg);
}
.gallery img:nth-child(3){
transform: rotateY(120deg);
}
.gallery img:nth-child(4){
transform: rotateY(180deg);
}
.gallery img:nth-child(5){
transform: rotateY(240deg);
}
.gallery img:last-child{
transform: rotateY(300deg);
}
.gallery:hover img{
transform: translateZ(100px);
}

代碼說明：

1.將相冊容器設(shè)置為透視模式。

2.設(shè)置圖片為保留3D效果并設(shè)置旋轉(zhuǎn)角度。

3.通過hover事件實現(xiàn)鼠標(biāo)懸浮圖片向前移動的效果。

這樣我們就可以使用這個css樣式來制作炫酷的立體旋轉(zhuǎn)相冊了。