css样式鼠标经过div翻转transform-style:preserve-3d; transition:1.5s;

<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
        .a11s{
       width: 240px;
       position: relative;
       height: 260px; 
           color：#fff;
           font-size:22px;
       background-color:#1330a3
       display: flex;
       justify-content: center;
       align-items: center;
          /*3d——双面效果*/
      transform-style:preserve-3d;
      transition:1.5s;
     cursor: pointer;
     border-radius: 8px;
         }
      .a11s:hover{
           /*鼠标经过翻转180°*/
    transform:rotateY(180deg);
            }
      .face{
        position: absolute;
        }
     .back{
     width: 240px;
     height: 260px;
     backface-visibility: hidden;
         /*让它成为背面，开始只显示正面*/
        transform:rotateY(180deg);    
        background-color: #4993dd;
    text-align: center;
    color: #d9d9d9	  
      }
    </style>

  <div class="a11s" >
   <div style="width: 240px;height:260px;">
    <div  class="face front">
    奶茶
    </div>
   </div>
  <div class="face back">
   奶茶
  </div>
 </div>

鼠标经过前

鼠标经过后翻转