正面
背面
翻轉(zhuǎn).gif
要實(shí)現(xiàn)一個(gè)卡片翻滾的3D效果哄褒，鼠標(biāo)移入翻滾到背面臭墨，鼠標(biāo)移出翻滾到正面
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; //設(shè)置過渡動畫，翻滾過渡
backface-visibility: hidden; //該屬性與transform： rotate相關(guān)，背面朝上的元素隱藏
}
.faq-title{
background: #141B3F;
color: #fff;
font-size: 22px;
transform: perspective(600px) rotateY(0); //設(shè)置正面的旋轉(zhuǎn)角度及透視
}
.faq-content{
background: #fff;
color: #00082F;
transform: perspective(600px) rotateY(-180deg);//設(shè)置背面的旋轉(zhuǎn)角度及透視
p{
height: 100%;
overflow: auto;
font-size: 15px;
font-weight: bold;
}
}
&:hover{
.faq-title{
transform: perspective(600px) rotateY(-180deg); //設(shè)置鼠標(biāo)移入后的狀態(tài)
}
.faq-content{
transform: perspective(600px) rotateY(0deg);//設(shè)置鼠標(biāo)移入后的狀態(tài)
}
}
}
按照代碼中的注釋寫css樣式就可以實(shí)現(xiàn)翻滾效果了
