前端vue实现卡片翻转效果【css3实现】

尔滨丶陈春波

已于 2022-07-25 16:37:32 修改

阅读量2.2k

点赞数

分类专栏： CSS3【动态】文章标签： vue.js 前端 css3

于 2022-06-15 17:59:02 首次发布

陈春波

本文链接：https://blog.csdn.net/weixin_48337566/article/details/125301630

版权

CSS3【动态】专栏收录该内容

13 篇文章 4 订阅

订阅专栏

有志者事竟成，破釜沉舟百二秦关终属楚
苦心人天不负，卧薪尝胆三千越甲可吞吴。

📌博主介绍

💒首页:水香木鱼

🛫专栏：邂逅CSS

✍简介: 博主姓：陈，名：春波。花名 “水香木鱼”，星座附属 “水瓶座一枚” 来自于富土肥沃的"黑龙江省"-美丽的 “庆安小镇”

🔰 格言: 生活是一面镜子。你对它笑，它就对你笑；你对它哭，它也对你哭。

🔋 小目标: 成为 会设计、会开发的 “万能钥匙”

📝文章内容

小伙伴们，大家好！又一次和大家见面了，本期木鱼带来的是Css3实现卡片翻转效果。

✍ 一、标签代码

     <!--实训平台-->
      <div class="box">
        <!--正面-->
        <div class="front">
          <div class="front_title">
            <img src="./images/practical.png" class="_title_i">
            <p class="_title_p">实训平台</p>
          </div>
          <div class="front_text">
            <p class="text_p">&ensp;&ensp;实训平台面向在校人工智能与数据科学相关专业的老师与学生，提供实验工具和天池经典实验案例与数据集。</p>
            <div class="train_bg"></div>
          </div>
        </div>
        <!--反面-->
        <div class="back">
          <!--标题-->
          <div class="back_title">
            <p class="_title_ptwo">『实训平台』</p>
          </div>
          <!--内容部分-->
          <div class="back_contentTwo">
            <!--模板-->
<!--            <div class="contentTwoIconModules">-->
<!--              &lt;!&ndash;图标&ndash;&gt;-->
<!--              <i class="iconfont icon-jianzao2 TwoIconModules_i"></i>-->
<!--              <p class="TwoIconModules_p1">铁路专业数据集</p>-->
<!--              <p class="TwoIconModules_p2">1230</p>-->
<!--            </div>-->
<!--            <div class="contentTwoIconModules">-->
<!--              &lt;!&ndash;图标&ndash;&gt;-->
<!--              <i class="iconfont icon-jianzao2 TwoIconModules_i"></i>-->
<!--              <p class="TwoIconModules_p1">铁路专业数据集</p>-->
<!--              <p class="TwoIconModules_p2">1230</p>-->
<!--            </div>-->
          </div>
          <!--按钮-->
          <div class="contentTwoBtnModules">
            <el-button>查看更多</el-button>
          </div>
          <!--火车背景-->
          <img class="contentTwoImgModules" src="./images/train_04.png">
        </div>
      </div>

✍ 二、样式代码

可能看到这里，许多小伙伴吐槽了，这是？@remvw:1920/100vw;
木鱼再一次明确，这是适配方案。百试百灵，👇适配很简单。

有关适配请移步此处-vue后台管理做适配的最佳方案，你知道吗

@remvw:1920/100vw;//适配方案

  .box {
    position: relative;
    width: 440 / @remvw;
    height: 466 / @remvw;
    margin: 30px auto;
    transition: all 1s;
    transform-style: preserve-3d;
  }
  .front, .back {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  //正面
  .front {
    width: 440 / @remvw;
    height: 466 / @remvw;
    background-color: #fff;
    z-index: 1;
    backface-visibility: hidden;
    box-shadow: -1px 17px 27px 1px #F0F2F4;
    border-radius: 6 / @remvw;
    opacity: 1;
    //标题
    .front_title{
      height: 233 / @remvw;
      display: flex;
      align-items: center;
      justify-content: center;
      ._title_i{
        width: 100 / @remvw;
        height: 100 / @remvw;
        margin-right: 18 / @remvw;
      }
      ._title_p{
        font-size: 30 / @remvw;
        font-weight: bold;
        color: #515151;
      }
    }
    .front_text{
      position: absolute;
      margin: 0 auto;
      width: 440 / @remvw;
      display: flex;
      flex-direction: column;
      align-items: center;
      .text_p{
        width: 360  / @remvw;
        height: 111 / @remvw;
        font-size: 22 / @remvw;
        color: #969696;
      }
      //铁轨前景
      .train_bg{
        width: 100%;
        height: 86px;
        background: url("../images/railBg.png") no-repeat;
        background-size: cover;
      }
    }
  }
  //反面
  .back {
    width: 440 / @remvw;
    height: 466 / @remvw;
    background: linear-gradient(225deg, #008DDD 100%, #1890ff 100%);
    transform: rotateY(180deg);
    transform-style: preserve-3d;
    border-radius: 8 / @remvw;
    position: relative;
    //标题
    .back_title{
      height: 174 / @remvw;
      display: flex;
      align-items: center;
      justify-content: center;
      ._title_itwo{
        font-size: 88 / @remvw;
        margin-right: 40 / @remvw;
      }
      ._title_ptwo{
        font-size: 30 / @remvw;
        font-weight: bold;
        color: #F5F5F5;
        border-radius: 4 / @remvw;
      }
    }

    //内容
    .back_contentTwo{
      display: flex;
      justify-content: space-around;
      align-items: center;
      //模板
      .contentTwoIconModules{
        width: 112 / @remvw;
        height: 101 / @remvw;
        text-align: center;
        .TwoIconModules_i{
          font-size: 40 / @remvw;
          color: #F5F5F5;
          margin-bottom: 10 / @remvw;
        }
        .TwoIconModules_p1{
          width: 122 / @remvw;
          height: 21 / @remvw;
          font-size: 16 / @remvw;
          color: #F5F5F5;
          margin-bottom: 8 / @remvw;
        }
        .TwoIconModules_p2{
          font-size: 14 / @remvw;
          font-weight: bold;
          color: #F5F5F5;
        }
      }
    }

    //按钮
    .contentTwoBtnModules{
      position: absolute;
      left: 32%;
      bottom: -6%;
      z-index: 12;
      height: 180 / @remvw;
      display: flex;
      justify-content: center;
      align-items: center;
      .el-button{
        width: 140 / @remvw;
      }
    }
    //背景图片
    .contentTwoImgModules{
      width: 220 / @remvw;
      height: 210 / @remvw;
      position: absolute;
      right: 0%;
      bottom: 0%;
    }
  }
  .box:hover {
    transform: rotateY(180deg);
  }

📢博主致谢

非常感谢小伙伴们阅读到结尾，本期的文章就分享到这里，总结了【前端vue实现卡片翻转效果【css3实现】】，希望可以帮到大家，谢谢。
如果你觉得本篇文章有帮助到您，鼓励一下木鱼吧! 点击【关注+点赞+收藏+评论+转发 】支持一下哟
🙏您的支持就是我更新的最大动力。⭐⭐⭐记得一键三连呦!⭕