关于css3中的2d样式skew倾斜详解

最新推荐文章于 2025-03-20 20:07:39 发布

置顶

AlwaysSmlileWPC

最新推荐文章于 2025-03-20 20:07:39 发布

阅读量2.2k

点赞数 3

分类专栏： skew 文章标签： css3 skew

本文链接：https://blog.youkuaiyun.com/AlwaysSmlileWPC/article/details/79890004

版权

本文详细探讨了CSS3中transform属性的skew功能，解释了2D坐标系的不同以及skew(x,y)参数如何影响元素倾斜。通过实例分析skew(45deg,-30deg)的效果，并介绍了通过设置`transform-origin`改变元素倾斜的原点位置。" 131217895,8676151,理解华为防火墙会话表：原理与操作,"['网络安全', '华为', '网络协议']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介：

在css3中，transform有个属性skew，能使元素产生倾斜效果，不少小伙伴接触到时都很费解，为什么倾斜效果和自己想的不一样，当然网上也有不少死记硬背规律口诀的方法，但我个人觉得都不是很好，所以这里我详细讲解其中的变换原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倾斜讲解</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 300px;
            height: 300px;
            background-color: red;
            margin: 50px auto;
            font-size: 50px;
            color: white;
            /*transition: all 1s;*/
        }

        div:hover {
            /*2d x轴朝下，y轴朝右，（x,y）也就是旋转角度都是以偏向该第一坐标系的为正*/
            /*1:*/
            transform-origin: top left; /*//作用,以左上角建立坐标系*/
            transform: skew(45deg, -30deg);
        }
    </style>
</head>
<body>
<div>我是要倾斜的盒子&

最低0.47元/天解锁文章