5.11 (案例) skew

作者: 柒月柒日晴7 | 来源:发表于2017-06-08 01:35 被阅读0次

skew.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>skew</title>
    <style type="text/css">
    div{
        width:200px;
        height: 100px;
        background: -webkit-linear-gradient(left,orange 30%,red 100%);
        margin: 50px;
        transition: 1s all ease;
    }
    div:nth-child(2):hover{
        /*transform:skew(45deg,45deg);*/

        transform:skewY(45deg) skewX(45deg);

        /*transform:skew(30deg);
        1.如果写一个参数 ，默认 第二个 参数为0 表示只是水平拉伸 围绕 x轴 倾斜 一定角度
        正数代表往里面倾斜 ,
        2.transform:skewX(); 表示只是水平拉伸 围绕 x轴 倾斜 一定角度
        3.transform:skewY(); 表示只是垂直拉伸 围绕 Y轴 倾斜 一定角度
        4.transform:skewY(45deg) skewX(45deg) 表示先执行前面 拉伸，再执行后面的拉伸 ;
        5.transform:skew(45deg,45deg) 表示 水平 垂直 同步拉伸 45deg
        */
    }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>