把动画写在里层的div避免动画卡顿
<div class="cardbox">
<div class="card" >
<div class="style1" >
<div class="ser_img"><img src="../../../static/image/service1.png" alt=""></div>
<div class="explain">
<p class="bold_size">智能管家系统</p>
<small>买家裂变粉丝</small>
</div>
</div>
<div class="style2" >
<div class="info">
<p class="bold_size">智能管家系统</p>
<p class="des">将公众号打造成店铺IP,系统自动打标,会员多维度筛选,实现精细化会员管理。利用公众号搭建多种营销活动,沉淀用户,裂变粉丝,引流至店,提高复购,从消费粉丝裂变合伙人。形成买家-粉丝-合伙人的微信电商生态闭环。</p>
</div>
</div>
</div>
</div>
.cardbox {
@include wh(100%, 512px);
// background: lightblue;
display: flex;
flex-wrap: wrap;
align-content: space-between;
justify-content: space-between;
transform: translate3d(0, 0, 0);
.card {
@include wh(410px, 240px);
text-align: center;
position: relative;
&:hover .style1 {
z-index: 1;
transform: rotateY(180deg);
}
&:hover .style2 {
z-index: 2;
transform: rotateY(0deg);
}
.style1,
.style2 {
@include wh(100%, 100%);
position: absolute;
left: 0;
top: 0;
transition: all 0.5s ease-in-out;
transform-style: preserve-3d;
backface-visibility: hidden;
box-shadow: 3px 5px 7px 0px rgba(68, 68, 68, 0.06);
background: #fff;
}
.style1 {
transform: rotateY(0deg);
z-index: 2;
.ser_img {
@include wh(100%, 150px);
background: #fd7776;
img {
@include wh(100%, 150px);
}
}
.explain {
@include wh(100%, 90px);
// background: lightgreen;
padding-top: 18px;
p {
margin-bottom: 21px;
position: relative;
&::after {
content: "";
display: block;
@include wh(28px, 2px);
background: #e61211;
position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: -12px;
}
}
// small {
// // font-size: 12px;
// // color: rgba(133, 133, 133, 1);
// // line-height: 24px;
// }
}
}
.style2 {
z-index: 1;
transform: rotateY(180deg);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
.info {
@include wh(315px, 196px);
// background: pink;
border-bottom: 1px solid #cfcfcf;
text-align: left;
position: relative;
.bold_size {
margin-bottom: 33px;
position: relative;
text-align: center;
&::after {
content: "";
display: block;
@include wh(28px, 2px);
background: #e61211;
position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: -12px;
}
}
.des {
line-height: 24px;
}
}
}
}
}