在CSS3中,我们可以使用transform属性的skew()方法来实现元素的倾斜效果。

语法:

transform: skewX(x);        /*沿X轴方向倾斜*/transform: skewY(y);        /*沿Y轴方向倾斜*/transform: skew(x, y);       /*沿X轴和Y轴同时倾斜*/

说明:

跟translate()、scale()方法类似,倾斜也有3种情况:skewX()、skewY()、skew()。

参数x表示元素在x轴方向的倾斜度数,单位为deg(即degree的缩写)。如果度数为正,则表示元素沿下x轴方向逆时针倾斜;如果度数为负,则表示元素沿x轴方向顺时针倾斜。

参数y表示元素在y轴方向的倾斜度数,单位为deg。如果度数为正,则表示元素沿y轴方向顺时针倾斜;如果度数为负,则表示元素沿y轴方向逆时针倾斜。

对于倾斜的方向,我们不需要去记忆,因为在实际开发中,稍微测试一下就知道了。

举例:skewX(x)

在线测试<!DOCTYPE html><html><head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*设置原始元素样式*/
        #origin
        {            width:200px;            height:100px;            border:1px dashed gray;
        }        /*设置当前元素样式*/
        #current
        {            width:200px;            height:100px;            color:white;            background-color: lightskyblue;            transform:skewX(30deg);
        }    </style></head><body>
    <div id="origin">
        <div id="current"></div>
    </div></body></html>

浏览器预览效果如下图所示。

分析:

transform:skewX(30deg);表示元素沿x轴方向逆时针倾斜30°。如果把30°改为-30°,则元素会沿x轴方向顺时针倾斜30°,此时预览效果如下图所示。

实际上,transform:skewX(30deg);其实可以等价于transform:skew(30deg, 0);,小伙伴们可以自行测试一下。此外在实际开发中,如果忘了究竟什么时候顺时针倾斜,什么时候逆时针倾斜,只需要稍微写一小段代码测试一下就知道了。

对于初学者来说,可能一时半会看不出skewX()方法是怎么一回事。其实skewX()方法的变形原理是这样的:由于元素限定了高度为100px,而skewX()方法是沿着x轴方向倾斜的。因此只要倾斜角度不超过180°,元素都会保持100px的高度,同时为了保持倾斜,元素只能沿着x轴方向拉长本身。

举例:skewY(y)

在线测试<!DOCTYPE html><html><head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*设置原始元素样式*/
        #origin
        {            width:200px;            height:100px;            border:1px dashed gray;
        }        /*设置当前元素样式*/
        #current
        {            width:200px;            height:100px;            color:white;            background-color: lightskyblue;            transform:skewY(30deg);
        }    </style></head><body>
    <div id="origin">
        <div id="current"></div>
    </div></body></html>

浏览器预览效果如下图所示。

分析:

transform:skewY(30deg);表示元素沿y轴方向顺时针倾斜30°。如果把30°改为-30°,则元素会沿y轴方向逆时针倾斜30°,此时预览效果如下图所示。

实际上,transform:skewY(30deg);其实可以等价于transform:skew(0, 30deg);,小伙伴们可以自行测试一下。

举例:skew(x, y)

在线测试<!DOCTYPE html><html><head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*设置原始元素样式*/
        #origin
        {            width:200px;            height:100px;            border:1px dashed gray;
        }        /*设置当前元素样式*/
        #current
        {            width:200px;            height:100px;            color:white;            background-color: lightskyblue;            transform:skew(10deg, 20deg);
        }    </style></head><body>
    <div id="origin">
        <div id="current"></div>
    </div></body></html>

浏览器预览效果如下图所示。

分析:

transform:skew(10deg, 20deg);表示元素同时在x轴和y轴两个方向倾斜,x轴方向逆时针倾斜10°,y轴方向顺时针倾斜20°。如果把10deg改为-10deg,20deg改为-20deg,此时预览效果如下图所示。

实际上,transform:skew(10deg, 20deg);其实可以等价于以下代码:

transform:skewX(10deg);transform:skewY(20deg);