CSS实现2D卡片翻转特效

CSS实现2D卡片翻转特效

🦖我是Sam9029，一个前端

Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主

`🐱‍🐉🐱‍🐉恭喜你，若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！👍

---

最近在重温学习

CSS transform 和 transition

以及 CSS 的 2D 效果 remote

所以我将使用上诉的CSS 属性来写一个 卡片翻转的 特效

（记得以前好像有个什么游戏来着也有这种特效，一时间给忘了有些记不起来了）

实现的效果主要如下：

• 鼠标移动至卡片的图片翻转
• 自适应屏幕大小的排列卡片
  • 最近在温习自适应，有些头痛，此处在重温一遍

展示的源码与效果如下：

源码及效果

源码地址：

CSS实现2D卡片翻转特效 - 码上掘金 (juejin.cn)

展示效果：

思路

自适应的效果讲解

先了解HTML结构

• 将 卡片 分为前后 标签来展示
  • 前面为提示
  • 后面为图片

<main class="girlCont">
    <div class="flip-box">
        <div class="flip-item flip-item-front">
            <h1>Turn over</h1>
        </div>
        <div class="flip-item flip-item-back">
            <img src="https://c2.im5i.com/2022/08/29/uroq8.jpg" alt="" srcset="">
        </div>
    </div>
	<!--  重复<div class="flip-box"> 盒子 -->
</main>

• 卡片的父盒子采用 flex 布局 来实现卡片自动填满 盒子（屏幕的宽度）

        main.girlCont{
            border: 1px solid #a1a1a1;
            box-shadow: 1px 1px 5px 1px #999;
            padding: 1%;
            display: flex;
            flex-wrap: wrap;
        }

• 使用媒体查询来实现
  • 根据 卡片 的盒子来 设定
  • 主要设定了屏幕的 1024px 和 545px 的媒体查询（可自行多加些）

/* 翻转样式=============start========= */
.flip-box{
    overflow: hidden;
    min-width:25%;
    min-height:500px;
    max-height:fit-content;
    position:relative; 
    margin: 5px;
    padding: 5px;
    flex: 1;
}
@media screen and (max-width:1024px) {
    .flip-box{
        min-width:47%;
    }   
}
@media screen and (max-width:545px) {
    .flip-box{
        min-width:100%;
    }   
}

翻转效果的讲解

• 给 卡片 的项目盒子 设定 hover
  • 卡片前景 使用 remoteY 进行 180度的翻转
  • 卡片后景 使用 remoteY 进行 0度的翻转 （及不需要翻转）
    • 本省 前景 就 定位的重叠在 后景之上

.flip-box:hover .flip-item-front {
    z-index:1;
    transform:rotateY(180deg) scale(1.2);
}
.flip-box:hover .flip-item-back{
    z-index:2;
    transform:rotateY(0deg);
    transition: all .5s;
}

• 同时为了使得 后景 中的图片 有缩小 效果

  • 为了突出图片 我们可以 在 后景(.flip-item-back)加上 `background-image:

    ​ linear-gradient(-180deg,rgba(255,255,255,0) 0%,rgba(0,0,0,1) 100%);`

.flip-box:hover .flip-item-back img{
    transform:scale(0.7);
    transition: all 1s ease-in;
}

---

待改进

• 优化样式
• 其实我想实现一个 翻转时 的全屏蒙版效果，
  • 使得翻转的图片从屏幕中央 回到 原本卡片盒子的位置
  • 同时蒙版消失

---

🦖我是Sam9029，一个前端，坚信应无所往

文章若有错误，敬请指正🙏

**🐱‍🐉🐱‍🐉恭喜你，都看到这了，求收藏，求评论，求一个大大的赞👍！不过分吧**