前端vue实现卡片翻转效果【css3实现】
有志者事竟成,破釜沉舟百二秦关终属楚
苦心人天不负,卧薪尝胆三千越甲可吞吴。
📌博主介绍
💒首页:水香木鱼
🛫专栏:邂逅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">  实训平台面向在校人工智能与数据科学相关专业的老师与学生,提供实验工具和天池经典实验案例与数据集。</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;
木鱼再一次明确,这是适配方案。 百试百灵,👇适配很简单。
有关适配请移步此处-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实现】】,希望可以帮到大家,谢谢。
如果你觉得本篇文章有帮助到您,鼓励一下木鱼吧!点击
【关注+点赞+收藏+评论+转发
】支持一下哟
🙏您的支持就是我更新的最大动力。⭐⭐⭐记得一键三连呦!⭕
💡往期精彩
🈯vue时间格式处理(YYYY-MM-DD HH:mm:ss)moment.js,神器你知道吗?