CSS（Cascading Style Sheets）是一種用于網頁美化的技術，它可以通過控制文本、字體、顏色等來實現網頁美觀改善。其中，翻轉圖片是一種常見的效果之一，通過一些簡潔的CSS代碼即可輕松實現。

/*首先，定義一個目標元素*/
.flip-box {
background-color: transparent;
perspective: 1000px;  /*設置透視距離*/
}
/*定義翻轉前面的圖片或內容的樣式*/
.flip-box-front, .flip-box-back {
position: absolute;
width: 300px;
height: 200px;
transition: transform .8s;
backface-visibility: hidden;
}
/*定義翻轉后面的圖片或內容的樣式*/
.flip-box-back {
transform: rotateY(180deg);
}
/*當鼠標懸停于目標元素上時，將其翻轉*/
.flip-box:hover .flip-box-front {
transform: rotateY(180deg);
}
/*當鼠標離開目標元素時，將其翻轉回去*/
.flip-box:hover .flip-box-back {
transform: rotateY(0deg);
}

以上便是一個基本的CSS翻轉圖片的實現方法，需要注意的是，需要給目標元素設置透視距離，才能實現卡片式翻轉效果。除此之外，還可以在翻轉過程中添加其他的樣式設置，以實現更多更精彩的效果。