CSS是建立在HTML基礎上的一種樣式描述語言。在Web頁面中，通過CSS可以對各種元素進行樣式的設置和控制。

其中，圖片動畫效果是制作Web頁面中常用的效果之一。下面我們將介紹如何使用CSS來制作圖片上下翻轉動畫效果。

.flip-img {
position: relative;
width: 300px;
height: 400px;
margin: 0 auto;
perspective: 1000px;
}
.flip-img:hover .front,
.flip-img:hover .back {
transform: rotateX(180deg);
}
.front,
.back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
transition: transform .6s ease-in-out;
}
.front {
background-image: url(front.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.back {
background-image: url(back.jpg);
background-repeat: no-repeat;
background-size: cover;
transform: rotateX(180deg);
}

首先，我們需要創建一個包含兩個子元素的容器，分別用來展示圖片的正反面。在容器上設置perspective屬性是為了使容器有三維空間的感覺，同時也是讓后續的3D變換更順暢。

接著，我們需要分別設置正反面子元素的位置、大小以及背景圖，并將backface-visibility屬性設置為hidden，這樣當元素進行旋轉時，旋轉過程中背面不可見。此外，我們還需要為元素的transform屬性設置一個過渡效果，讓旋轉更加自然。

最后，在鼠標滑過容器時，我們使用:hover偽類為front和back子元素添加transform屬性值為rotateX(180deg)，實現上下翻轉動畫的效果。