css3 相冊幻燈

CSS3相冊幻燈是一種展示圖片的方式，利用CSS3的新特性，可以實現各種炫酷的動畫效果。

在實現CSS3相冊幻燈時，需要用到以下幾個CSS3特性：

/* 轉換 */
transform: translate(-50%, -50%) rotate(45deg);
/* 過渡 */
transition: all 0.3s ease-in-out;
/* 動畫 */
animation: myAnim 2s infinite;
@keyframes myAnim {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}

通過使用以上特性，可以實現如下CSS3相冊幻燈效果：


/* CSS代碼 */
.slide-gallery {
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
}
.slide-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transform: scale(0.8);
transition: all 0.2s ease-in-out;
}
.slide-item.active {
opacity: 1;
transform: scale(1);
}
.slide-item.next,
.slide-item.prev {
opacity: 0.5;
}
.slide-item.next {
transform: translateX(100%);
}
.slide-item.prev {
transform: translateX(-100%);
}
.slide-item.prev.active,
.slide-item.next.active {
opacity: 1;
transform: translateX(0);
}