一、基本CSS图片翻转
CSS提供了多种方式来对图片进行翻转，其中基本的两种是沿着水平和垂直方向进行的，分别为：
.horizontal-flip {
transform: scaleX(-1);
}
.vertical-flip {
transform: scaleY(-1);
}
上述代码中transform是CSS3中的属性，scaleX和scaleY都是取值-1时表示翻转，分别表示水平和垂直方向。
有时候我们需要同时进行水平和垂直方向的翻转，可以使用以下代码实现：
.horizontal-vertical-flip {
transform: scaleX(-1) scaleY(-1);
}
上述代码中同时运用了scaleX和scaleY属性，将两个都设置为-1即可实现同时水平和垂直方向的翻转。
二、带有动画效果的CSS图片翻转
不只是静态的翻转，我们还可以使用CSS属性实现翻转的动画效果。下面展示的代码实现了一个图片在鼠标悬浮时翻转180度的效果：
.flip-image {
transition: transform 1s;
}
.flip-image:hover {
transform: rotateY(180deg);
}
上述代码使用了transition属性来设置过渡效果，当鼠标悬浮在图片上时，会将transform属性的值从原本的状态变为rotateY(180deg)，旋转了180度。
需要注意的是，hover伪类只是一个示例，实际情况下你可以根据需要使用其他触发方式来触发过渡效果。
三、利用3D旋转实现CSS图片翻转
除了旋转，CSS3还支持立体的3D翻转，下面的代码中实现了一个3D翻转的例子：
.flip-card {
width: 200px;
height: 260px;
perspective: 1000px;
position: relative;
}
.flip-card-inner {
position: absolute;
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
z-index: 2;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
}
上述代码中，perspective是制造3D效果的关键属性，值1000px表示距离屏幕的距离为1000px，越大则离屏幕越远，效果越显著。
transform-style属性的值为preserve-3d时，子元素沿着父元素的3D坐标展开。而backface-visibility属性用于控制元素的背面是否可见，相当于实现了元素的立体感。
四、使用CSS滤镜实现图片翻转
除了transform属性，CSS还支持滤镜的方式实现图片的翻转，以下代码是一个使用CSS滤镜翻转图片的示例：
.css-filter-flip {
filter: flipH;
}
上述代码中，我们使用了一个叫做flipH的css滤镜，可以将图片沿着水平方向翻转。除了flipH，CSS还提供了其他滤镜，比如flipV、rotate、skew等，在不同情况下，使用不同的滤镜可以实现不同的效果。
五、利用CSS clip-path实现图片翻转
CSS还提供了clip-path技术，可以将图片裁剪为任意形状。以下代码是一个实现使用clip-path实现图片翻转的代码示例：
.css-clip-path-flip {
clip-path: polygon(100% 0, 0% 50%, 100% 100%, 0% 100%, 100% 50%, 0 0);
transform: rotateY(-180deg);
transition: all 1s ease-in-out;
}
.css-clip-path-flip:hover {
clip-path: polygon(0 0, 0% 50%, 0 100%, 100% 100%, 0 50%, 100% 0);
transform: rotateY(0deg);
transition: all 1s ease-in-out;
}
上述代码中，clip-path使用了一个多边形的点集来定义图片的翻转过程。同时在:hover效果下，使用另一组点集实现了翻转效果的切换。
总结
以上就是CSS实现图片翻转的几种常用方法及其代码实现，可以根据不同的需求选择不同的方式来实现翻转效果。需要注意的是，在使用过渡效果时，transition属性可以实现逐渐翻转，形成比较自然的效果。
