1. <style>
    2.     *{
    3.         margin: 0;
    4.         padding: 0;
    5.     }
    6.     ul{
    7.         margin: 100px;
    8.     }
    9.     ul li{
    10.         width: 120px;
    11.         height: 35px;
    12.         list-style: none;
    13.         /* 一会需要给box 旋转 也需要透视 干脆给li */
    14.         perspective: 500px;
    15.         float: left;
    16.         margin: 0 5px;
    17.     }
    18.     .box{
    19.         position: relative;
    20.         width: 100%;
    21.         height: 100%;
    22.         transform-style: preserve-3d;
    23.         transition: all .7s;
    24.     }
    25.     .box:hover{
    26.         transform: rotateX(90deg);
    27.     }
    28.     .front,
    29.     .bottom{
    30.         position: absolute;
    31.         top: 0;
    32.         left: 0;
    33.         width: 100%;
    34.         height: 100%;
    35.         font-size: 5px;
    36.         text-align: center;
    37.         line-height: 35px;
    38.     }
    39.     .front{
    40.         background-color:green;
    41.         transform:translateZ(17.5px);
    42.         z-index: 1;
    43.     }
    44.     .bottom{
    45.         background-color: grey;
    46.         /* 若果有移动 或其他样式 必须先移动 */
    47.         transform: translateY(17.5px) rotateX(-90deg);
    48.     }
    49. </style>
    50. <body>
    51.     <ul>
    52.         <li>
    53.             <div class="box">
    54.                 <div class="front">张子枫</div>
    55.                 <div class="bottom">在这里等你</div>
    56.             </div>
    57.         </li>
    58.         <li>
    59.             <div class="box">
    60.                 <div class="front">张子枫</div>
    61.                 <div class="bottom">在这里等你</div>
    62.             </div>
    63.         </li>
    64.         <li>
    65.             <div class="box">
    66.                 <div class="front">张子枫</div>
    67.                 <div class="bottom">在这里等你</div>
    68.             </div>
    69.         </li>
    70.         <li>
    71.             <div class="box">
    72.                 <div class="front">张子枫</div>
    73.                 <div class="bottom">在这里等你</div>
    74.             </div>
    75.         </li>
    76.         <li>
    77.             <div class="box">
    78.                 <div class="front">张子枫</div>
    79.                 <div class="bottom">在这里等你</div>
    80.             </div>
    81.         </li>
    82.     </ul>
    83. </body>

    image.png
    image.png