以下是使用JavaScript实现一个图片切换的立体翻转效果的代码示例:

CSS:
css
.img-container {
width: 400px;
height: 300px;
position: relative;
perspective: 1000px;
}

img {
width: 100%;
height: 100%;
position: absolute;
transition: transform 0.5s;
transform-style: preserve-3d;
}

.img-back {
transform: rotateY(180deg);
opacity: 0;
}

JavaScript:
javascript
function flipImage() {
var imgContainer = document.querySelector('.img-container');
var imgFront = document.querySelector('.img-front');
var imgBack = document.querySelector('.img-back');

if (imgContainer.classList.contains('flipped')) {
imgContainer.classList.remove('flipped');
imgFront.style.transform = 'rotateY(0deg)';
imgBack.style.transform = 'rotateY(180deg)';
imgFront.style.opacity = 1;
imgBack.style.opacity = 0;
} else {
imgContainer.classList.add('flipped');
imgFront.style.transform = 'rotateY(-180deg)';
imgBack.style.transform = 'rotateY(0deg)';
imgFront.style.opacity = 0;
imgBack.style.opacity = 1;
}
}

在上述代码中,我们使用了CSS的`transform`属性和JavaScript来实现图片的立体翻转效果。通过添加和移除CSS类,我们可以在按钮点击时切换图片的翻转状态。