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);
    }
}
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

飞羽逐星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值