卡片翻折效果

最新推荐文章于 2024-09-30 15:42:36 发布

优雅的大白鹅

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量247

点赞数 3

分类专栏：项目实用小方法文章标签：前端 css

本文链接：https://blog.csdn.net/weixin_48186771/article/details/141532612

版权

项目实用小方法专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<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);
}