CSS是一種用于標記網頁內容表現形式的語言，可以通過它實現各種酷炫的效果，其中之一就是圖片翻轉動畫。下面我們來看一下如何用CSS實現圖片翻轉動畫：

.flip-card {
perspective: 1000px; /* 視距 */
}
/* 卡片容器 */
.flip-card-inner {
position: relative;
width: 300px;
height: 200px;
transition: transform 0.6s;
transform-style: preserve-3d;
}
/* 卡片正面 */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
/* 卡片正面 */
.flip-card-front {
background-image: url('front.jpg');
transform: rotateY(0deg);
}
/* 卡片背面 */
.flip-card-back {
background-image: url('back.jpg');
transform: rotateY(180deg);
}
/* 鼠標懸停時翻轉 */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}

首先需要設置卡片容器的視距，這里設置為1000px。每個卡片容器需要有一個子元素，即卡片內部控制翻轉效果的元素，這里命名為flip-card-inner。卡片容器和卡片內部都需要設置寬度和高度。

卡片內部需要使用transform屬性，其中preserve-3d表示保持3D空間，而rotateY(0deg)和rotateY(180deg)分別表示卡片正面和背面的初始角度。backface-visibility: hidden;表示在元素背面時隱藏元素。

當鼠標懸浮在卡片上時，再通過hover選擇器控制卡片內部的transform屬性，使卡片完成翻轉效果。

以上就是簡潔易懂的CSS圖片翻轉動畫實現的代碼和原理，希望對大家有所幫助。