css skew 倾斜.html

最新推荐文章于 2022-01-13 17:16:03 发布

学无止境慢慢来

最新推荐文章于 2022-01-13 17:16:03 发布

阅读量425

点赞数

分类专栏： CSS

原文链接：http://www.lvyestudy.com/css3/css3_9.5.aspx

版权

CSS 专栏收录该内容

71 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css skew 倾斜</title>
    <style>
        /*参考：
            http://www.lvyestudy.com/css3/css3_9.5.aspx
            https://www.cnblogs.com/mr-yuan/p/5899299.html
        知识点：
            0.（我的）坐标系：
                原点o，元素的左上角。
                x轴，水平向右，
                y轴，竖直向下。
                注意：坐标系可以个人理解/选择。
            1.skew(x, y)，倾斜/拉伸/挤压。
                x,y, 可以是，如：30deg，-30deg。
                x，以转换原点（transform-origin）为基点，把元素的竖直边向水平方向倾斜，
                    使竖直方向产生 x 夹角，元素水平边保持水平。
                y，以转换原点（transform-origin）为基点，把元素的水平边向竖直方向倾斜，
                    使水平方向产生 y 夹角，元素竖直边保持竖直。
            2.倾斜效果。
                +x,则竖直边由+y轴向+x轴方向倾斜。
                -x,则竖直边由+y轴向-x轴方向倾斜。
                +y,则水平边由+x轴向+y轴方向倾斜。
                -y,则水平边由+x轴向-y轴方向倾斜。
            3.skew()方法跟 translate(), scale()方法一样，也有3种情况：
                1.skewX(x) <=> skew(x, 0)
                    skewX()，两个竖直边向 X 轴倾斜且保持平行，拉长宽度，保持高度。
                2.skewY(y) <=> skew(0, y)
                    skewY()，两个水平边向 Y 轴倾斜且保持平行，拉长高度，保持宽度。
                3.skew(x,y)，会先按照 skewX() 方法倾斜，然后按照 skewY() 方法倾斜；
                    同时拉长宽高。
            4.语法如：transform:skewX(x);
        */
        #origin {
            width: 200px;
            height: 200px;
            margin: 100px auto; /*水平居中*/
            border: 1px dashed silver;
        }

        #current {
            width: 200px;
            height: 200px;
            background-color: #3EDFF4;
            color: white;
            text-align: center;
            line-height: 200px;
            transition: all 1s;
        }

        #current:hover{
            /*transform: skewX(30deg);*/
            /*transform: skewY(30deg);*/
            transform: skew(30deg, 30deg);
            transform-origin: left top;
        }
    </style>
</head>
<body>
<div id="origin">
    <div id="current">这是一段文字。</div>
</div>
</body>
</html>

学无止境慢慢来

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css skew 倾斜.html

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>css skew 倾斜</title> <style> /*参考： http://www.lvyestudy.com/css3/css3_9.5.aspx https://www.cnblogs.c.
复制链接

扫一扫

专栏目录