CSS可以實現兩張圖片的翻轉效果。本文將介紹兩種方式實現圖片翻轉。

CSS3 transform屬性實現圖片翻轉

.flip-picture {
transition: transform 0.5s;
}
.flip-picture:hover {
transform: rotateY(180deg);
}

上述代碼中，我們給圖片添加一個class名為flip-picture。通過CSS3的transform屬性實現了圖片360度翻轉效果。當鼠標懸停在圖片上時，圖片向后翻轉200度，從而實現了翻轉效果。

CSS3 transform-style屬性實現3D圖片翻轉

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

上述代碼中，我們也給圖片添加一個class名為flip-container。通過CSS3的transform-style屬性實現了3D圖片翻轉效果。當鼠標懸停在圖片上時，圖片向后翻轉180度，從而實現了翻轉效果。

以上就是CSS實現兩張圖片翻轉的兩種方法，不同的場景可以采用不同的方法來實現不同的效果。