CSS 倾斜（skew）

CSS 倾斜语法

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

语法：

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

说明：

与 CSS 平移、CSS 缩放相似，CSS 倾斜也有 3 种函数：skew()、skewX()、skewY()。

参数 x 表示元素在 X 轴方向的倾斜度数，单位为 deg（即 degree 的缩写）。如果度数为正，则表示元素沿 X 轴方向逆时针倾斜；如果度数为负，则表示元素沿 X 轴方向顺时针倾斜。

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

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

CSS 倾斜示例

接下来，我们通过几个简单的例子来讲解 CSS 是如何实现倾斜效果的。

示例 1：skewX(x) 实现 CSS 倾斜

运行代码

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

页面效果如下图所示。

skewX(x) 实现 CSS 倾斜 1

分析：

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

skewX(x) 实现 CSS 倾斜 2

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

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

示例 2：skewY(y) 实现 CSS 倾斜

运行代码

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

页面效果如下图所示。

skewY(y) 实现 CSS 倾斜 1

分析：

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

skewY(y) 实现 CSS 倾斜 2

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

示例 3：skew(x, y) 实现 CSS 倾斜

运行代码

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

页面效果如下图所示。

skew(x, y) 实现 CSS 倾斜 1

分析：

transform: skew(10deg, 20deg); 表示元素同时在 X 轴和 Y 轴两个方向倾斜。其中，X 轴方向逆时针倾斜 10°，Y 轴方向顺时针倾斜 20°。如果把 10deg 改为 -10deg，20deg 改为 -20deg，此时页面效果如下图所示。

skew(x, y) 实现 CSS 倾斜 2

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

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

注意，transform: skew(10deg, 20deg); 并不等价于以下代码：

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

这是因为，如果在同一个选择器中写两行 transform，那么后面的一行会覆盖前面的一行。因此，上面的代码实际上只执行了 skewY(20deg)。

在实际开发中，单纯对某个元素定义倾斜是没有太多意义的。在实际开发中，CSS 倾斜大多数情况下都是结合 CSS 过渡或 CSS 动画来一起使用。