CSS图片从上往下翻是一种很酷的效果，可以让网站变得更加生动有趣。下面我们来看看如何实现这个效果：

.flip-container {
perspective: 1000px;
}
.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: rotateX(180deg);
}
.flip-container:hover .flipper {
transform: rotateX(180deg);
}

首先，我们需要创建一个包含翻转图片的容器，并给这个容器设置透视属性（perspective）。接着，在容器内创建一个翻转元素（flipper），并让它的transform-style属性设置为preserve-3d，这样才能实现3D效果。

接下来，我们在翻转元素内创建一个正面（front）和一个背面（back）元素。我们需要让这两个元素的backface-visibility属性都设置为hidden，这样就可以让它们在翻转时不会出现反面的内容。此外，正面元素应该有较高的z-index值，以确保它在翻转时始终在最上面。

最后一步是设置翻转元素的hover事件，让它在鼠标悬浮时旋转180度。这个效果是通过transform属性实现的，改变元素的旋转角度。

这就是CSS图片从上往下翻的实现方法。你可以根据自己的需要调整参数，让效果更加炫酷。