一、效果

将鼠标移动到下面的方块上即可看到效果。

二、css 样式

    /* 卡片区域 */
    .rotate-card {
      margin: 10px;
      display: inline-block;
      width: 180px;
      height: 180px;
      color: white;
      user-select: none;
      perspective: 50rem;
      -moz-perspective: 50rem;
    }


    /* 前面和后面 在卡片被hover时的样式 */
    .rotate-card:hover .front{transform: rotateY(-180deg);}
    .rotate-card:hover .back {transform: rotateY(0);}

    /* 前面和后面在卡片常规状态时的通用样式 */
    .rotate-card .front, .rotate-card .back {
      transition-duration: 400ms;
      position: absolute;
      backface-visibility: hidden;
      border-radius: 8px;
      overflow: hidden;
    }


    /* 下面是前面和后面各自常规下的样式 */
    .rotate-card .front {
      display: flex;
      flex-direction: column;
      justify-content: center;
      justify-items: center;
      text-align: center;
      font-size: 35px;
      width: 100%;
      height: 100%;
    }
    .rotate-card .back{
      background-color: #b4bccc;
      transform: rotateY(180deg);
      width: 100%;
      height: 100%;
    }

    .bg-pink{background-color: #ff8d8d;}

三、html 结构

<div class="rotate-card">
  <div class="back"><div style="margin: 10px">一只棕色的小狗从小溪边快速的跑过。</div></div>
  <div class="front bg-pink">一句话</div>
</div>