卡片翻折效果

<div className={styles.cards}>
          {new Array(4).fill(1)?.map(() => {
            return (
              <div className={styles.card}>
                <div className={styles.card1}>card</div>
                <div className={styles.card2}>card</div>
              </div>
            );
          })}
 </div>

.cards{
  display: flex;
 
  justify-content: space-around;
}

.card{
  position: relative;
}
.card1,.card2{
  width: 200px;
  height: 220px;
  background-color: pink;
  position: absolute;
  border: 1px solid;
}
.card2{
  left: 0px;
  opacity: 0;
  animation:rotate 20s linear infinite;
}
.card2:hover {
  opacity: 1;
  transform: perspective(400px) rotateY(-25deg) translate3d(-16px, 0px, 10px);
}

css