1. <style>
    2.     div{
    3.         float: left;
    4.         overflow: hidden;
    5.         width: 100px;
    6.         height: 100px;
    7.         margin: 10px;
    8.         border: 1px solid green;
    9.     }
    10.     div::before{
    11.         content: "张子枫";
    12.         display: block;
    13.         width: 100%;
    14.         height: 100%;
    15.         background-color: green;
    16.         transform: rotate(180deg);
    17.         transform-origin: left bottom;
    18.         transition: all 0.5s;
    19.     }
    20.     div:hover::before{
    21.         transform: rotate(0deg);
    22.     }
    23. </style>
    24. <body>
    25.     <div></div>
    26.     <div></div>
    27.     <div></div>
    29. </body>

    image.png
    image.png