纯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;}

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