演示代码:

<!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: 200px;height: 200px;background-color: #000;
                margin: 200px auto;
                perspective: 500px;
            }
            .wyzx{
                width: 200px;height: 200px;background-color: #f00;
            }
            .wyzx:hover{
                /* 倾斜转换 */
                /* X轴倾斜,是与Y轴的夹角,高度不变 */
                /* 正值逆时针,;负值相反 */
                /* transform: skewX(30deg); */
                
                /* Y轴倾斜,是与X轴的夹角,宽度不变 */
                /* 正值逆时针,;负值相反 */
                /* transform: skewY(30deg); */
                
                /* X和Y轴同时设置倾斜 */
                /* transform: skew(30deg,30deg); */
                transform: skew(30deg);
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div class="wyzx">我要自学</div>
        </div>
    </body>
</html>
打开支付宝首页搜“559920739”领红包,领到大红包的小伙伴赶紧使用哦! (如果你觉得本文不错,请扫描下面二维码随意打赏哦)
最后修改:2020 年 09 月 14 日
如果觉得我的文章对你有用,请随意赞赏