js多个图片翻转

<div class="image-container">
    <img src="image1.jpg" alt="Image 1" class="flip-image">
    <img src="image2.jpg" alt="Image 2" class="flip-image">
    <img src="image3.jpg" alt="Image 3" class="flip-image">
    <!-- 更多图片... -->
</div>

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flip-image {
    width: 200px; /* 设置图片宽度 */
    height: auto;
    margin: 10px;
    transition: transform 0.5s; /* 添加过渡效果 */
}

.flip-image.flipped {
    transform: rotateY(180deg); /* 翻转图片 */
}

// 获取所有需要翻转的图片元素
const images = document.querySelectorAll('.flip-image');

// 为每张图片添加点击事件监听器
images.forEach((image, index) => {
    image.addEventListener('click', () => {
        // 切换翻转类
        image.classList.toggle('flipped');
    });
});