使人头疼的skew()倾斜函数之我见

时间 2020-07-21

标签使人头疼 skew 倾斜函数繁體版

原文原文链接

一、背景

    今天学习了下CSS3新增的变形：transform属性及2D变换，其余的诸如translate、scale、rotate都很好理解，除了skew()这个函数，让我头疼了一个多小时。
    MDN是这样解释的：skew()函数定义了一个元素在二维平面上的倾斜转换。它的结果是一个transform-function 数据类型,这种转换是一种剪切映射(横切)，它在水平和垂直方向上将单元内的每一个点扭曲必定的角度。每一个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；所以，一个点离原点越远，其增长的值就越大。
    乍一看彻底不知所云，因此仍是直接上代码，仔细研究skew的规律:
浏览器

二、“X轴倾斜”验证

<body>
    <div></div>
</body>
复制代码

首先，在body中创建一个div盒子，以下是div的CSS代码：
bash

div {
    position: relative;
    margin-top: 100px;
    margin-left: 100px;
    width: 200px;
    height: 200px;
    background-color: pink;
    border: 1px solid black;
    transform: skew(30deg, 0);
}
复制代码

即“X轴方向30°倾斜”获得的形状以下：函数

将skew(30deg,0)更改成将skew(-30deg,0)，再看看发生了什么：

2.1在F12里调试了大半天，结合这两张图，我得出的结论是：

一、所谓X轴倾斜，无非就是盒子发生height方向的扭曲，盒子上点以各自X值、盒子垂直中线上的点为旋转中心旋转了对应角度从而扭曲了图形。
二、倾斜角度为正时，盒子上的点以垂直中线上的点逆时针旋转相应角度，盒子的border-left和border-right显示出了旋转方向和角度。
三、显然，倾斜角度为负时全部点是顺时针旋转的.
四、当倾斜角度为90deg的奇数倍时，整个图像会扭成一条水平方向的直线（能够想象一下图中的角度变成90的样子），但浏览器并不会显示出来，当倾斜角度为90deg的偶数倍时，盒子形状又会还原
学习

三、“Y轴倾斜”验证

下面是Y轴倾斜部分的验证，代码与Part2基本一致，只更换了transform：skew()值：spa

<style>
        div {
            position: relative;
            margin-top: 100px;
            margin-left: 100px;
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 1px solid black;
            transform: skew(0deg, 30deg);
        }
    </style>
</head>

<body>
    <div>
    </div>
</body>

复制代码

获得图形以下：
调试

试试负值transform: skew(0deg, -30deg);会怎么样？

3.1结合F12调试状况，我得出的结论是：

一、所谓Y轴倾斜，是盒子发生width方向的扭曲，盒子上点以各自Y值、盒子水平中线上的点为旋转中心旋转了对应角度从而扭曲了图形。
二、Y倾斜角度为正时，盒子上的点以水平中线上的点顺时针旋转相应角度，盒子的border-top和border-bottom显示出了旋转方向和角度。
三、显然，倾斜角度为负时全部点是逆时针旋转的.
四、当倾斜角度为90deg的奇数倍时，整个图像会扭成一条竖直方向的直线（能够想象一下图中的角度变成90的样子），但实际在浏览器并不会显示出来，当倾斜角度为90deg的偶数倍时，图像形状又会还原
code

四、总结

到这里，我相信已经把倾斜的规律描述的差很少了，规律就是：
X轴：角正,竖轴逆扭；角负，竖轴顺扭。
Y轴：角正,横轴顺扭；角正，横轴逆扭。
orm

4.1（建议记住正角度的扭转轴和方向，负值方向反过来就行）

若是X轴和Y轴同时扭曲，则先扭曲X轴再扭曲Y轴，举个例子transform: skew(30deg, -60deg)，每步结果如图所示：
一、扭曲前cdn

二、X：30deg——竖轴逆扭30°

三、Y：-60deg——横轴逆扭60°

五、写在最后

我认为skew是盒子发生了扭曲并不是旋转，扭曲后盒子没有角度的变化可是形状改变，只是这种扭曲很像是：blog