vue element卡片 滑过特效 vue实现卡片翻转

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

---

📌博主介绍

✍简介: 博主姓：陈，名：春波。花名 “水香木鱼”

📝文章内容

小伙伴们，大家好！又一次和大家见面了，本期木鱼带来的是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">  实训平台面向在校人工智能与数据科学相关专业的老师与学生，提供实验工具和天池经典实验案例与数据集。</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">-->
<!--              <!–图标–>-->
<!--              <i class="iconfont icon-jianzao2 TwoIconModules_i"></i>-->
<!--              <p class="TwoIconModules_p1">铁路专业数据集</p>-->
<!--              <p class="TwoIconModules_p2">1230</p>-->
<!--            </div>-->
<!--            <div class="contentTwoIconModules">-->
<!--              <!–图标–>-->
<!--              <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; 木鱼再一次明确，这是适配方案。 百试百灵，👇适配很简单。

@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实现】】，希望可以帮到大家，谢谢。

---