1. <style>
    2.     body{
    3.         perspective: 400px;
    4.     }
    5.     .box{
    6.         position: relative;
    7.         width: 300px;
    8.         height: 300px;
    9.         margin: 100px auto;
    10.         transition: all .6s;
    11.         transform-style: preserve-3d;
    12.     }
    13.     .box:hover{
    14.         transform: rotateY(180deg);
    15.     }
    16.     .front,
    17.     .back{
    18.         position: absolute;
    19.         top: 0;
    20.         left: 0;
    21.         width: 100%;
    22.         height: 100%;
    23.         border-radius: 50%;
    24.         font-size: 30px;
    25.         color: #fff;
    26.         /* 文字水平居中 */
    27.         text-align: center;
    28.         /* 文字垂直居中 */        
    29.         line-height:300px ;
    30.     } 
    31.     .front{
    32.         background-color: khaki;
    33.         /* z-index 属性指定一个元素的堆叠顺序 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 */
    34.         z-index: 1; 
    35.     }
    36.     .back{
    37.         background-color: green;
    38.         /* 两个盒子背靠背 */
    39.         transform: rotateY(180deg);
    40.     }
    41. </style>
    42. <body>
    43.     <div class="box">
    44.         <div class="front">张子枫</div>
    45.         <div class="back">我在这里等你</div>
    46.     </div>
    47. </body>

    image.png
    image.png