css深入剖析transform的skew

一、skew

1.skew(x,y)

指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

.box {
    width: 150px;
    height: 150px;
    background-color: black;
    transform-origin: 0 0;
    transform: skew(45deg);
}

.box {
    width: 150px;
    height: 150px;
    background-color: black;
    transform-origin: 0 0;
    transform: skew(45deg,30deg);
}

2.斜切目标

改属性实际上会改变方块所在的坐标系

<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        perspective: 800px;
        transform-style: preserve-3d;
    }
    div {
        position: absolute;
        top: 100px;
        left: 100px;
        width: 100px;
        height: 100px;
        background-color: black;
        transform: skew(45deg);
        
    }
</style>
<hr style="position: absolute;top: 100px;width: 100%;">
<div></div>
<hr style="position: absolute;top: 200px;width: 100%;">

在上面虽然设置的是x轴斜切角度，实际拉伸的是y坐标轴

div {
    position: absolute;
    top: 100px;
    left: 100px;
    width: 100px;
    height: 100px;
    background-color: black;
    transform: skew(45deg,30deg);
    
}

当在设置y轴时，实际x轴被拉伸。

3.实例运用

深度变换

div {
    position: absolute;
    top: 100px;
    left: 100px;
    width: 100px;
    height: 100px;
    background-color: black;
    animation: run 4s cubic-bezier(0,0,1,1) infinite alternate;
}
@keyframes run{
    0%{
        transform: skew(45deg,45deg);
    }
    50%{
        transform: skew(0deg,0deg);
    }
    100%{
        transform: skew(-45deg,-45deg);
    }
}