在Web開發中，圖片展示是一個基本需求。但是，普通平鋪的圖片可能有些平淡無味。這時我們可以使用一些特效，比如圖片折疊自動旋轉。這不僅可以提升頁面的美觀度，也可以增加用戶的交互體驗。

下面是一份實現自動旋轉折疊的CSS代碼：

.fold-image {
width: 400px;
height: 300px;
position: relative;
background-image: url('image.jpg');
background-size: cover;
}
.fold-image::before,
.fold-image::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
transform-origin: top right;
transform-style: preserve-3d;
backface-visibility: hidden;
animation: fold 5s ease-in-out infinite;
}
.fold-image::before {
transform: rotateY(-180deg);
}
@keyframes fold {
0% {
transform: rotateX(0) rotateY(0);
}
25% {
transform: rotateX(90deg) rotateY(0);
}
50% {
transform: rotateX(90deg) rotateY(-180deg);
}
75% {
transform: rotateX(180deg) rotateY(-180deg);
}
100% {
transform: rotateX(180deg) rotateY(0);
}
}

上面的代碼中，我們首先定義了一個類名為“fold-image”的元素，使用了“background-image”屬性來引入我們的圖片。接著，我們使用“::before”和“::after”偽元素來表示圖片的兩側，然后通過動畫“fold”來實現自動旋轉折疊效果。使用這些CSS技巧，我們可以在網頁上實現出各種炫酷的圖片展示效果。