100字范文 > 前端vue实现卡片翻转效果【css3实现】

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

时间：2022-07-25 20:24:34

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

📌博主介绍

💒首页:水香木鱼

🛫专栏：邂逅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><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);}