CSS是一種用于網頁設計的樣式表語言，通過改變CSS樣式表的屬性和值，可以實現各種不同的效果。

其中一個比較有趣的效果就是旋翻180度。這種效果可以應用在卡片翻轉的效果中，讓網頁看起來更生動有趣。

/* 創建一個容器 */
.flip-container {
perspective: 1000px;
}
/* 容器的子元素 */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* 正面效果 */
.front {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 反面效果 */
.back {
backface-visibility: hidden;
transform: rotateY(180deg);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 鼠標懸浮時翻轉 */
.flip-container:hover .flipper {
transform: rotateY(180deg);
}

以上代碼中，首先創建了一個容器，通過perspective屬性給容器添加了透視效果。

然后創建了一個.flipper子元素，通過設置transform-style屬性為preserve-3d，來保證旋轉時子元素的效果能夠被保留。

在正面效果.front中使用backface-visibility:hidden屬性來確保正面不會被渲染在反面上。

在反面效果.back中使用transform: rotateY(180deg)將反面旋轉180度。

最后，通過鼠標懸浮時翻轉的CSS，實現了180度旋轉的效果。