CSS可以用來創建各種獨特的照片切換效果，讓網站更具有吸引力。下面我們就來介紹一些常用的css照片切換效果。

1. 淡入淡出效果

.slideshow{
position: relative;
height: 500px;
}
.slideshow img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: -1;
transition: opacity 1s ease-in-out;
}
.slideshow img.active{
opacity: 1;
z-index: 1;
}
.slideshow img:last-child{
position: static;
}

2. 滑動效果

.slideshow{
position: relative;
height: 500px;
overflow: hidden;
}
.slideshow img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transition: transform 1s ease-in-out;
}
.slideshow img.active{
z-index: 2;
transform: translateX(-100%);
}
.slideshow img:last-child{
position: absolute;
top: 0;
left: 100%;
transform: translateX(0);
}

3. 翻頁效果

.slideshow{
position: relative;
height: 500px;
perspective: 1000px;
}
.slideshow img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 1s ease-in-out;
}
.slideshow img.active{
z-index: 2;
transform: rotateY(-180deg);
}
.slideshow img:last-child{
position: absolute;
top: 0;
left: 0;
transform: rotateY(180deg);
}

以上就是常用的css照片切換效果，你可以根據需求選擇合適的效果應用到自己的網站上。