css实现鼠标移入翻滚卡片的3D效果

正面

背面

翻转.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样式就可以实现翻滚效果了