欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css深入剖析transform的skew

程序员文章站 2022-06-24 12:41:42
skew一、skew1.skew(x,y)2.斜切目标3.实例运用一、skew1.skew(x,y)指定对象skew transformation(斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0.box { width: 150px; height: 150px; background-color: black; transform-origin: 0 0; transform: skew(45deg);}.bo...

一、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);
}

css深入剖析transform的skew

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

css深入剖析transform的skew

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坐标轴
css深入剖析transform的skew

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

当在设置y轴时,实际x轴被拉伸
css深入剖析transform的skew

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);
    }
}

本文地址:https://blog.csdn.net/xun__xing/article/details/107456533