倾斜度

最新推荐文章于 2024-03-09 16:04:05 发布

木槿晞

最新推荐文章于 2024-03-09 16:04:05 发布

阅读量184

点赞数

分类专栏：课程文章标签： html5 css

本文链接：https://blog.csdn.net/xyw_jzj5201314/article/details/109589098

版权

课程专栏收录该内容

21 篇文章 0 订阅

订阅专栏

倾斜度

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 100px;
            width: 100px;
            border: 1px solid;
            background: red;
        }
    </style>
</head>

<body>
    <div style="transform: skewX(30deg);transform-origin: left top; position: absolute;"></div>
    <div style="position: absolute; background-color: transparent;">
        <p>沿着x轴正方向倾斜，即y轴增加3角度</p>
    </div>

    <div style="transform:skewY(300deg);transform-origin: left top;position: absolute; top: 200px;"></div>
    <div style="position: absolute;background-color: transparent;top: 200px;">
        <p>沿着y轴正方向倾斜，即x轴增加3角度</p>
    </div>
    <div style="transform:skew(30deg,30deg);transform-origin: left top;position: absolute;top: 400px;"></div>
    <div style="position: absolute;background-color: transparent;top: 400px;"></div>
</body>

</html>