css3transform属性

最新推荐文章于 2024-08-20 22:00:33 发布

UNDERCOVERj

最新推荐文章于 2024-08-20 22:00:33 发布

阅读量458

点赞数

分类专栏： html-css 文章标签： css3

本文链接：https://blog.csdn.net/github_37037281/article/details/68486634

版权

html-css 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

skew
一个参数时，水平倾斜。两个参数水平垂直倾斜
transform-origin默认是中心

.button {
    transform: skewX(-45deg);background: red
}
.button > div {
    transform: skewX(45deg);
}
<div class="button">
    <div>
        click me 
    </div>
</div>
//内层click me不会倾斜
法二：
.button {
    position: relative;
    /* 其他的文字颜色、内外变局等样式*/
}
.button::before {
    content: '';
    position: absolute;
    top: 0;right: 0;bottom: 0;left: 0;
    z-index: -1;
    background: #58a;
    transform: skew(-45deg);
}
<div class="button">
    <div>
        click me 
    </div>
</div>
//让伪元素在水平和垂直方向上都被拉伸至宿主元素的尺寸