演示代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="reset.css"/>
        <style type="text/css">
            #box{
                width: 800px;height: 300px;margin: 100px auto;
                background: #ccc;display: flex;justify-content: space-between;
            }
            .pk{
                width: 200px;height: 300px;position: relative;
            }
            .pkbm,.pkzm{
                width: 200px;height: 300px;position: absolute;top: 0;left: 0;
                transition: transform 1s;
            }
            .pkbm{
                background: url(pk.jpg) no-repeat 100% 100%/1100% 500%;
            }
            .pkzm{
                background: url(pk.jpg) no-repeat 0 0/1100% 500%;
                backface-visibility: hidden;
            }
            .pk:hover .pkzm{
                transform: rotateY(180deg);
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div class="pk">
                <div class="pkbm"></div>
                <div class="pkzm"></div>
            </div>
            <div class="pk">
                <div class="pkbm"></div>
                <div class="pkzm"></div>
            </div>
            <div class="pk">
                <div class="pkbm"></div>
                <div class="pkzm"></div>
            </div>
        </div>
    </body>
</html>
打开支付宝首页搜“559920739”领红包，领到大红包的小伙伴赶紧使用哦！ （如果你觉得本文不错，请扫描下面二维码随意打赏哦）
最后修改：2020 年 09 月 14 日
© 禁止转载
如果觉得我的文章对你有用，请随意赞赏