CSS是一種重要的前端技術，它可以實現很多常見的UI效果，比如圖片的翻轉效果。以下是一個簡單示例：

.flip-container {
perspective: 1000px; /* 設定3D視角 */
}
.flipper {
transition: 0.6s; /* 設定翻轉效果持續時間 */
transform-style: preserve-3d;
position: relative;
}
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
}
.back {
transform: rotateY(180deg); /* 將背面反轉180度 */
}
.flip-container:hover .flipper {
transform: rotateY(180deg); /* 鼠標懸停時執行翻轉 */
}

代碼中，我們定義了一個.flip-container的容器，里面包含一個.flipper的元素，以及一個正面.front和背面.back。其中，perspective屬性設定3D視角，transition屬性設定翻轉效果的持續時間，transform-style屬性設定子元素的transform屬性是否繼承。backface-visibility屬性是為了解決背面出現時仍然顯示問題。而在:hover偽類中，我們將.flipper元素翻轉180度，從而實現圖片的翻轉效果。

注：該效果需要瀏覽器支持CSS3，IE9及以下不支持。