正面
背面
翻转.gif
要实现一个卡片翻滚的3D效果，鼠标移入翻滚到背面，鼠标移出翻滚到正面
html
<div class="card">
<div class="faq-title">What Is Randverse?</div>
<div class="faq-content"><p>Randverse is a new metaverse with a full of randomness game, where you can free to play, and at the same time can earn by predicting accurate results</p></div>
</div>
css
.card{
width: 100%;
height: 180px;
background: #141B3F;
border-radius: 10px;
overflow: hidden;
position: relative;
.faq-title,
.faq-content{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
transition: transform ease 1s; //设置过渡动画，翻滚过渡
backface-visibility: hidden; //该属性与transform： rotate相关，背面朝上的元素隐藏
}
.faq-title{
background: #141B3F;
color: #fff;
font-size: 22px;
transform: perspective(600px) rotateY(0); //设置正面的旋转角度及透视
}
.faq-content{
background: #fff;
color: #00082F;
transform: perspective(600px) rotateY(-180deg);//设置背面的旋转角度及透视
p{
height: 100%;
overflow: auto;
font-size: 15px;
font-weight: bold;
}
}
&:hover{
.faq-title{
transform: perspective(600px) rotateY(-180deg); //设置鼠标移入后的状态
}
.faq-content{
transform: perspective(600px) rotateY(0deg);//设置鼠标移入后的状态
}
}
}
按照代码中的注释写css样式就可以实现翻滚效果了
