CSS 图片翻边效果在网页设计中经常使用，它可以让图片看起来更加生动、立体。而实现这个效果的方法其实也很简单，下面我们就来介绍一下。

.flip-card {
background-color: transparent; 
perspective: 1000px; /* 设置翻转的视距 */ 
transform-style: preserve-3d; /* 保留 3D 空间 */ 
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
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;
}
/* 图片的背面 */
.flip-card-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}

代码中，首先我们需要创建一个外层容器，使用 perspective 属性来设置翻转的视距。之后，我们创建一个内部容器用来装载图片，使用 transform-style 属性设置保留 3D 空间。接着，我们使用 hover 事件来触发图片的翻转效果，让内部容器实现 rotateY 旋转。

最后，我们使用两个 absolute 定位的容器分别布局图片的正面和背面，使用 backface-visibility 属性设置正面不可见。然后，在正面和背面容器上添加不同的样式，就完成了整个效果的实现。