1.code

import React from 'react';
import styles from './ImageFlipOnHover.module.css'; 
import Image from 'next/image';

function ImageFlipOnHover() {
  return (
    <div className={styles.container}>
      <div className={styles['image-container']}>
        <div className={styles.image}>
          <Image src="/S__2990083_0.jpg" alt="Image 1" width={150} height={150} />
        </div>
      </div>

      <div className={styles['image-container']}>
        <div className={styles.image}>
          <Image src="/S__2990086_0.jpg" alt="Image 2" width={150} height={150} />
        </div>
      </div>

      <div className={styles['image-container']}>
        <div className={styles.image}>
          <Image src="/S__2990087_0.jpg" alt="Image 3" width={150} height={150} />
        </div>
      </div>

      <div className={styles['image-container']}>
        <div className={styles.image}>
          <Image src="/S__2990088_0.jpg" alt="Image 3" width={150} height={150} />
        </div>
      </div>
    </div>
  );
}

export default ImageFlipOnHover;

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .image-container {
    width: 200px;
    height: 200px;
    perspective: 1000px;
    cursor: pointer;
  }
  
  .image {
    width: 100%;
    height: 100%;
    transition: transform 0.5s;
    transform-style: preserve-3d;
  }
  
  .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .image:hover {
    transform: rotateY(180deg);
  }

2.實作